Добавьте значки в приложения React, Angular или Vue за 3 шага
Руководство для начинающих по использованию значков SVG в качестве шрифтов
Существует множество вариантов использования, в которых нам нужно управлять стилем значков и изображений в зависимости от поведения пользователя. Эти варианты использования проявляются, когда пользователь взаимодействует со значками/изображениями, наводя на них курсор или щелкая по ним.
Мы можем добиться желаемых результатов, используя SVG значка и манипулируя свойством fill изображения SVG. Честно говоря, это слишком много работы. Это также снижает читабельность кода.
Чего мы можем добиться с его помощью?
Безупречный пользовательский опыт является одним из наиболее важных и решающих факторов для удержания пользователей. Успех продукта измеряется не только количеством новых пользователей/посетителей, но и повторными/постоянными пользователями.
Таким образом, применение этого метода импорта значков в качестве шрифтов поможет вам улучшить взаимодействие с пользователем. Разработчикам также легко работать с иконками/изображениями как со шрифтами по сравнению с разными изображениями разных форматов.
Если у вас есть значки в качестве шрифтов, вы относитесь к ним как к одному. Теперь у вас есть все свойства CSS шрифтов, и теперь вы можете применять их. Некоторые из них:
- Изменение размера шрифта (изменение размера значка/изображения)
- Изменение цвета
- Изменение цвета фона
Как?
Я буду использовать следующий репозиторий: Scalable Angular Folder Structure для демонстрации. Клонируйте его и следуйте за ним.
Я буду добавлять иконки из одного из самых известных источников — Flaticon в качестве шрифтов в приложении angular.
Шаг 1: Загрузите значки
Загрузите нужные иконки с Flaticon. Я буду скачивать иконки социальных сетей в формате .svg.
- Фейсбук
- Инстаграм
- Твиттер
- YouTube
Шаг 2. Преобразование значков в шрифты
Для этого воспользуемся услугами Icomoon. Этот инструмент помогает не только преобразовать значки (svg) в шрифты, но также помогает сохранить связанные значки в группе (или наборе, как они это называют). Это довольно удобная функция. Мы также можем создать учетную запись и управлять всеми нашими иконками по проектам. Честно говоря, все это и это тоже в бесплатном инструменте — ВПЕЧАТЛЯЕТ!
Начните с посещения приложения Icomoon.
Импортируйте значки SVG с помощью кнопки Импортировать значки, после чего будет создан список всех ваших значков в наборе без названия. >
Затем выберите все значки, щелкнув по ним.
Нажмите кнопку Создать шрифт в правом нижнем углу. Это создаст шрифты для ваших значков SVG и даст возможность загрузить шрифты. Вариант загрузки появится в правом нижнем углу.
Шаг 3. Импорт сгенерированных шрифтов в ваше приложение
После загрузки шрифтов у вас будет заархивированный файл. Распакуйте его, и вы увидите кучу файлов и папок, как показано ниже:
Перейдя к нашему приложению, в папке assets создайте папку icon. Поместите все файлы из папки fonts, которую вы получаете от Icomoon.
Затем мы создаем папку scss, опять же внутри папки assets. Мы добавим еще одну вложенную папку в папку scss — modules. Там мы создадим файл _icon.scss
Затем скопируйте все содержимое из сгенерированного Icomoon style.css и вставьте его в файл _icon.scss.
Примечание. Убедитесь, что вы указали правильный путь при импорте шрифтов. Я также добавил комментарий в файл
_icons.scss, чтобы вы его не пропустили.
Теперь у вас есть все значки в виде классов.
- Facebook — значок-логотип-facebook
- Instagram — значок-логотип-instagram
- LinkedIn — icon-linkedin-logo
- Твиттер — иконка-твиттер
- YouTube — icon-youtube
Затем мы импортируем файл _icons.scss в нашу основную таблицу стилей — style.scss.
Шаг 4: Запустите двигатель!
Я попытался использовать шрифты на целевой странице и изменил некоторые свойства CSS, такие как цвет, размер шрифта и фон значков. Я также добавил стиль к значку facebook, когда вы наводите на него курсор. Посмотрите это здесь.
Код для целевой страницы — HTML
Код для целевой страницы — SCSS
Шаг 5: Наслаждайтесь!
Спасибо за ваше время. Я надеюсь, что смогу принести пользу.
Я доступен в некоторых социальных сетях, поэтому проверьте меня в:
