Ioni c React: Как интегрировать пользовательские шрифты и набор иконок - PullRequest
0 голосов
/ 13 июля 2020

Я новичок в Ioni c React, и я ищу правильный способ интеграции пользовательских шрифтов и пользовательского набора значков в мой проект, чтобы он работал на всех платформах, как задумано.

Настраиваемый набор значков. Моя цель - заставить мои пользовательские значки работать с IonIcon, чтобы я мог использовать параметры стиля по умолчанию, такие как «размер» и переменные CSS (например, --ioin c -stroke-weight).

Что я сделал до сих пор:

  1. Я добавил набор значков (все значки в формате svgs) в «public / assets / customicons /»
  2. Я импортировал IonIcon в мои компоненты, где это необходимо.
  3. Интегрирован (например)

Пока значки отображаются должным образом, а настраиваемые атрибуты «размер» работают. Но я не могу программно установить цвет значка или ширину штриха. Для всех значков установлены атрибуты по умолчанию (например, ). Даже если я удалю эти атрибуты по умолчанию, я не смогу установить их с помощью CSS переменных

Вопрос 1 : является ли «public / assets / customicons /» правильной папкой для хранения иконы? Вопрос 2 : Как сделать так, чтобы я мог менять цвет значка через CSS?

Пользовательский шрифт

Цель: я хочу, чтобы пользовательский шрифт отображается на всех платформах

То, что я сделал до сих пор:

  1. Добавлены пользовательские шрифты в «src / assets / fonts /»
  2. Создан «fonts .css »в« src / theme / », где я интегрировал шрифт через« @ font-face »
   @font-face {
     font-family: ‘FONTNAME’;
     src: url(’…/assets/fonts/FONTNAME.ttf’);
     font-style: normal;
     font-weight: 400;
     font-display: swap;
   }
назначил шрифт для Diffe rnet элементов

Вопрос 1 : Это правильная папка для хранения пользовательских шрифтов? (Я не смог сделать то же самое, когда пользовательский шрифт был сохранен в папке «public / assets / fonts /», как набор значков)

К сожалению, мне не удалось найти никаких документов, руководств или сообщения по любой из этих тем.

Спасибо за вашу помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...