Как использовать SVG-иконки в Vue.js
2 июля, 2022 12:05 пп 402 views | Комментариев нетDevelopment | Amber | Комментировать запись
Давным-давно миром правили иконки на основе шрифтов, но с тех пор многое изменилось, и теперь все используют иконки SVG. Сегодня это лучший способ добавления иконок в ваше приложение. К сожалению, чтобы добавить их вручную, у вас уйдет много времени и сил. К счастью, существует плагин vue-svgicon, чья цель – упростить эту задачу.
Установка и настройка vue-svgicon
Конечно, vue-svgicon можно установить через Yarn или NPM:
# Yarn
$ yarn add vue-svgicon -D
# NPM
$ npm install vue-svgicon --save-dev
Затем нужно загрузить предпочитаемый шрифт Icon с отдельными значками SVG для каждого глифа. Здесь мы используем набор Material Design, один из самых больших доступных наборов, где вы найдете почти 2000 отдельных глифов.
Вставьте эти файлы .svg в папку svg-icons в корневой каталог вашего проекта (вне каталога src).
Теперь пакету vue-svgicon необходимо преобразовать все файлы svg-иконок в файлы .js, которые можно загружать по отдельности. Давайте добавим быстрый скрипт NPM, который сделает это за нас. Отредактируйте файл package.json, включив в него приведенный ниже сценарий:
{
...
"scripts": {
...
"generate-icons": "vsvg -s ./svg-icons -t ./src/compiled-icons"
}
...
}Затем введите команду:
npm run generate-icons
Она выведет скомпилированные значки в src/compiled-icons/[icon-name].js.
Применение vue-svgicon
Теперь нужно загрузить иконки в наше приложение. Добавьте плагин vue-svgicon в основной файл приложения Vue, src/main.js:
... import VueSVGIcon from 'vue-svgicon' Vue.use(VueSVGIcon) ...
Теперь можно загрузить значки в компоненты, импортируя используемый значок при помощи элемента <svgicon>. Бонус этого плагина: с его помощью мы можем практически без усилий загружать в приложение только те значки, которые нам нужны.
<template> <div> <span>Icon Demonstration:</span> <!-- You can tweak the width, height, and color of the icon. --> <svgicon icon="menu" color="#0f2"></svgicon> </div> </template> <script> // If you really, really need to, you can import the whole iconset in your main.js file with `import ./compiled-icons`. import './compiled-icons/menu'; </script>
В арсенале vue-svgicon есть еще несколько полезных трюков, узнать о них подробнее можно в официальном репозитории.
Tags: SVG, Vue.jsИспользование SVG иконок с помощью Angular Material | by Aleksandr Serenko | F.
В данной статье приведу несколько решений как можно использовать Angular Material для вывода пользовательских иконок в SVG.
В документации Angular Material есть часть, которая связана с иконками — SVG icons.
Основная идея вывода иконок с помощью Material заключается в встраивании svg напрямую в документ, что позволяет стилизовать иконки с помощью CSS.
Есть два способа создания иконки:
- Первый способ это использовать путь до SVG иконки. Это решение будет аналогично работе тега
img.MatIconRegistryбудет загружать иконку поhttpи вставлять содержимое вHTML, где используется иконка. - Второй способ это использовать содержимое SVG и создавать иконку без дополнительных http запросов. Для этого просто создаются константы, значение которых и будет содержимое SVG.
Пример создания SVG иконки, указав путь до иконки:
Пример создания SVG иконки, используя содержимое иконки:
Для того чтобы не импортировать MatIconRegistry и DomSanitizer каждый раз, создадим простенький сервис — IconService:
В сервисе реализовано два метода:
add— создание иконки из содержимого SVG, где первый аргумент это имя иконки, второй аргумент это содержимое SVG.
addPath— создание иконки с использованием пути до иконки, где первый аргумент это имя иконки, второй аргумент это путь до SVG иконки.
Отмечу, что в Angular вы можете использовать пути иконок, которые расположены в assets. Однако путь до них нужно указывать начиная с assets, также как это делается при использовании картинок в HTML или CSS в Angular:
/assets/icons/telegram.svg
Сравнение решений
У каждого из решений есть свои плюсы и минусы.
Использование путей до иконок.
плюсы:
- Не увеличивает исходную сборку проекта
минусы:
- На каждую созданную иконку будет сделан HTTP запрос.
- При использовании SSR могут быть проблемы при сборке проекта, так как нужно особым образом обрабатывать запросы по загрузке иконок. Проблема проявляется при использовании пререндера.
- При медленном интернете иконки могут быть не загружены и пользователь, который получит страницу, может увидеть нежелательные сайд эффекты.

демо:
Использование содержимого SVG.
плюсы:
- Не создает дополнительных запросов к серверу
- Нет проблем с SSR
- Нет проблем с отображением при медленном интернете
минусы:
- Существенно увеличивает сборку проекта, так как все исходники SVG будут храниться в билде.
Если не загружать все иконки в главном модуле, а создавать иконки только в тех местах, где они используются и создавать lazy-loading модули, то негативный эффект может быть сведен к нулю.
демо:
Резюме
В статье разобраны примеры создания пользовательских иконок SVG c помощью Angular Material. Приведено два решения: создание иконок с использованием путей до иконок, а также создание иконок из содержимого SVG. В конце статьи разобраны плюсы и минусы каждого из приведенных решений.
Ссылки
Все исходники находятся на github, в репозитории:
GitHub — Fafnur/angular-samples: Samples of using different solutions in Angular
Samples of using different solutions in Angular.
github.com
Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — icons.
Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln
Как работать со значками SVG
Существует множество способов использования значков SVG в HTML и CSS, и я не пробовал их все. Вот как мы это делаем в нашей небольшой команде фронтенда в Kaliop. Он хорошо подходит для наших нужд, которые включают в себя:
- Контентные и коммуникационные веб-сайты, часто основанные на больших CMS, а не на полноценных веб-приложениях JS.
- Значки, которые часто представляют собой простые одноцветные значки (каждый потенциально может использоваться в нескольких разных цветах в зависимости от контекста и взаимодействия с пользователем). Двухцветные значки и градиентная заливка тоже возможны, но требуют немного больше работы.
Поддержка - IE11.
Эта статья доступна на французском и китайском языках. Большое спасибо переводчикам!
Подготовка значков
Когда вы получаете значок SVG от дизайнера или из инструмента дизайна (Illustrator, Sketch, Figma и т. д.), возникает соблазн просто добавить его в свой проект. Тем не менее, я считаю, что небольшая переделка в вашем любимом инструменте, чтобы убедиться, что точно соответствует , может избавить вас от некоторых головных болей и улучшить результат.
Простая иконка на монтажной области в Illustrator (слева) и Sketch (справа)Работа с новым документом или монтажной областью
Создайте новый документ или новую монтажную область в своем любимом инструменте и скопируйте и вставьте значок в центр. Это отличный способ убедиться, что ваша иконка чиста и не имеет множества скрытых путей.
Квадрат проще
Ваш значок не обязательно должен быть квадратным , но с квадратными значками легче работать (если только ваш значок или графика не очень широкие или очень высокие).![]()
Точные размеры имеют значение только в том случае, если вы хотите микроуправлять подгонкой пикселей (чтобы получить максимально четкие результаты на экранах с низким разрешением). Например, если все ваши значки могут поместиться на сетке 15 на 15 пикселей и в основном используются именно с такими размерами, продолжайте работать с монтажными областями или документами 15 × 15. Когда я не уверен, мне нравится размещать элементы на артборде 20×20.
Воздухопроницаемость по бокам
Оставьте немного места по краям, особенно для круглых форм. Браузеры используют сглаживание при рендеринге SVG-фигур, но иногда лишние пиксели от сглаживания визуализируются за пределами viewBox и обрезаются.
Как правило, в значке размером 16 или 20 пикселей оставляйте 0,5 или 1 пиксель пустого пространства с каждой стороны.
Кроме того, не забудьте экспортировать всю монтажную область, а не выбранные пути в центре, иначе вы потеряете это пустое пространство при экспорте.
Экспорт в SVG
- В Illustrator я просто использую «Сохранить как» и выбираю формат «SVG». (Может быть лучше использовать «Экспортировать как…» и выбрать SVG для оптимизированного результата.)
- В Sketch вы можете выбрать монтажную область, нажать «Сделать экспортируемым» в правом нижнем углу и выбрать «SVG» в качестве формата.
- В Inkscape вы можете «Сохранить как» и выбрать «Оптимизированный SVG».
Изучите SVG
Вам определенно следует изучить некоторые основы SVG, а также уметь читать и понимать структуру простых файлов SVG. В идеале вы должны знать о них:
- Группировка элементов:
,,. - Визуальные элементы:
,,,.
- Атрибуты стиля:
fill,stroke,stroke-width.
Я обычно ищу их в DevDocs (который просто предлагает более удобный вид документов MDN SVG), когда хочу узнать больше. Вам не обязательно делать это прямо сейчас, и вы можете начать свое приключение с SVG, копируя и вставляя код, но со временем будет полезно узнать достаточно, чтобы понять код, который вы копируете.
Когда вы экспортируете SVG из инструмента дизайна, он часто будет иметь немного или много ненужной разметки, метаданных и тому подобного. Он также может иметь чрезмерно точные данные о пути (в атрибуте d ). Попробуйте использовать такой инструмент, как SVGOMG, и сравните код до и после, чтобы увидеть, что было удалено или упрощено.
Удалить данные о цвете
Для одноцветных значков убедитесь, что:
- В исходном файле пути черные (
# 000000). - В экспортированном коде нет
заполненияатрибутов.
Если у нас есть жестко запрограммированные заливки в исходном коде SVG, мы не сможем изменить эти цвета в нашем коде CSS. Так что вообще лучше их удалить, по крайней мере для одноцветных иконок.
Illustrator не выводит атрибуты fill для полностью черного контура ( # 000000 ). Sketch делает это, поэтому вам, возможно, придется открыть экспортированный код SVG и вручную удалить атрибуты fill="#000000" .
Создание спрайта SVG
В этой части много кода, но на самом деле она совсем не сложная. Мы хотим создать документ SVG, содержащий элементов. Каждый должен иметь атрибут id , атрибут viewBox и будет содержать элементы значка (или другие графические элементы).
Я называю этот SVG-документ спрайтом (имея в виду спрайты в компьютерных играх и CSS), но его также можно назвать листом спрайтов или хранилищем символов.
Вот спрайт с одним значком:
Добавление значка к нашему спрайту
Допустим, Illustrator дал нам этот код для значка, показанного выше:
Мы можем немного упростить его (вручную или с помощью SVGOMG), сохранив только Атрибут viewBox и основные данные:
Теперь мы можем скопировать и вставить его в наш спрайт. Нам нужно преобразовать элемент в элемент и вставить его вручную в наш спрайт:
Вы можете сделать это вручную для всех ваших значков, но есть инструменты, которые автоматизируют этот процесс. Мы используем gulp-svg-symbols (вот наша конфигурация gulp, если вам интересно), но есть несколько графических инструментов и инструментов командной строки, которые экспортируют спрайты символов SVG, включая Icomoon.
Совет для профессионалов: сохраните папку с исходными значками
Если вы создаете свой спрайт вручную, я рекомендую сохранить папку с отдельными значками SVG:
assets/
иконки/
крест.svg
играть.svg
поиск.svg
...
общественный/
спрайт/
icons.svg Тогда, если вам нужно перестроить icons.svg или изменить отдельный значок, у вас есть правильные источники для работы. Будьте осторожны, чтобы ваш спрайт и исходная папка не рассинхронизировались.
Конечно, если вы используете процесс сборки (с помощью Gulp, Webpack или чего-то еще), вы можете передать ему свою исходную папку и позволить ему построить спрайт напрямую.
Важно: не все является иконкой
То, что что-то является SVG, не означает, что оно должно быть внутри вашего SVG-спрайта. Например:
Иллюстрации, которые вам не нужно стилизовать: сохраните как один файл SVG и включите его на свою страницу с
.
svg" alt="…"> Иллюстрации, которые вы хотите анимировать: рассмотрите возможность встраивания полного кода SVG в вашу HTML-страницу, чтобы вы могли выбирать и стилизовать определенные группы, контуры или фигуры, анимировать некоторые части и т. д.
Как правило, если это большая иллюстрация, которую нужно отобразить с разрешением 100 на 100 пикселей или намного больше, или если она содержит десятки элементов, это может быть не «значок». Вероятно, это также увеличило бы размер вашего спрайта.
Добавление значков на ваши страницы
Плохая новость заключается в том, что для того, чтобы использовать наши значки SVG, мы должны изменить наш код HTML. Никаких фонов CSS, никаких псевдоэлементов ::before . Наименее подробный HTML-код, который мы можем использовать:
Что может выглядеть так:
Значок SVG без стиля Теперь мы собираемся сделать этот HTML-код немного более подробным, чтобы его было легче стилизовать, а также сделать его более доступным.
Сначала я покажу несколько общих шаблонов, а затем мы объясним каждый технический выбор.
Шаблон A: чисто декоративный значок
Шаблон B: ссылка или кнопка со значком и текстом
Последние новости
Шаблон C: ссылка или кнопка со значком
Это то же самое, что и (B), но мы хотим показать только значок. Мы по-прежнему должны сохранять текст, чтобы пользователи программ чтения с экрана могли его прочитать.
Последние новости а>
Шаблон D: значок и замещающий текст вне ссылки или кнопки
Например, если у нас есть столбец таблицы со значками, представляющими «Да» и «Нет»:
Да
Что делают наши различные части HTML?
Использование осмысленных и локализованных меток
В некоторых статьях рекомендуется связать текстовую метку с каждым файлом SVG в вашем репозитории значков (например, поместив элемент в каждый ). Это ошибка, потому что визуальный символ может иметь разное значение в зависимости от контекста.![]()
Значок «увеличительное стекло» может означать «Показать форму поиска» в одном контексте и «Отправить мой поисковый запрос» во втором контексте. Ваши текстовые метки должны быть такими: «Показать форму поиска» и «Отправить поисковый запрос», а не «Поиск» (слишком общий) или, что еще хуже, «Увеличительное стекло» (описывает визуальные эффекты, а не смысл).
На многоязычных сайтах ваши текстовые метки также должны быть локализованы, включая все текстовые метки, которые по умолчанию скрыты для зрячих пользователей.
Внешние и встроенные спрайты
До сих пор мы показывали примеры для внешнего спрайта . Но некоторые старые браузеры — а именно, IE 9 — IE 11 — поддерживают только встроенных ссылок для .
Это можно заполнить с помощью JavaScript (svg4everybody, svgxuse). Или вы можете включить свой спрайт в HTML-код каждой страницы .
<тело>
<кнопка>
Начать воспроизведение
кнопка>
тело> У каждого метода есть свои плюсы и минусы.
| Встроенный спрайт | Внешний спрайт | |
|---|---|---|
| Поддержка браузера | Встроенная поддержка в IE9+. Старым версиям Safari/WebKit требуется спрайт в начале страницы (перед любой ссылкой). | Встроенная поддержка в Edge 13+, Safari 9+. IE и более ранние версии Safari/WebKit нуждаются в полифилле JS, таком как svg4everybody или svgxuse. Загрузка внешнего спрайта из другого домена пока не работает (даже с CORS, см., например, ошибку Chromium). Это можно заполнить с помощью JS, используя svgxuse. |
| Кэширование | Нет кэширования. Вес вашего спрайта (5 КБ, 15 КБ, 50 КБ…) добавляется к каждой странице. | Спрайт представляет собой отдельный файл и может кэшироваться браузером. Также он не раздувает HTTP-кеш на стороне сервера. |
| Скорость рендеринга | Иконки отображаются мгновенно. В медленных сетях рендеринг структуры и содержимого страницы может задерживаться, если перед содержимым вставлен тяжелый спрайт SVG. | Значки могут отображаться с небольшим опозданием, потому что а) для них требуется отдельный HTTP-запрос и б) браузер не определил приоритет загрузки этого SVG-файла (с помощью своего упреждающего предварительного синтаксического анализатора). |
| Обновление | Когда вам нужно обновить свой спрайт, вы должны убедиться, что он добавлен на каждую страницу. Это регенерирует все HTML-страницы, если вы используете статический генератор, или делает недействительными все кеши. | Изменен только один общедоступный файл, поэтому управлять обновлениями и кэшированием на стороне сервера немного проще. |
| С CDN | Не влияет. | Предупреждение: браузеры не будут загружать SVG, на который ссылается |
Мне нравится смешивать оба метода, создавая два спрайта:
- Маленький спрайт с основными значками (например, основные значки, используемые в заголовке страницы), которые будут встроены в каждую страницу. Целевой размер: 5 КБ или меньше.
- Большой файл со всеми иконками проекта, сохраненный как внешний файл. Целевой размер: 50 КБ или меньше.
В более крупных проектах мы можем добавить больше внешних спрайтов, когда некоторые значки могут быть сгруппированы вместе и использоваться только в одной части сайта или для определенной функции.
Стилизация значков с помощью CSS
Теперь, когда у нас есть значки SVG и спрайт SVG, и когда мы узнали, как добавлять значки в наш HTML, давайте посмотрим на сторону CSS.
Начиная с базовых стилей
Вот стили для двух наших служебных классов, icon и access-label .
/**
* Визуально скрытая доступная этикетка
* Использование стилей, которые не скрывают текст в программах чтения с экрана
* Мы используем !important, потому что мы не должны применять другие стили к этому скрытому альтернативному тексту.
*/
.access-метка {
позиция: абсолютная !важно;
ширина: 1px !важно;
высота: 1px !важно;
переполнение: скрыто !важно;
пробел: nowrap !важно;
}
/**
* Стиль значка по умолчанию
*/
.икона {
/* Использовать текущий цвет текста в качестве цвета заливки значка. */
заливка: текущий цвет;
/* Также наследуем размер текста. Также позволяет изменить размер значка, изменив его размер шрифта. */
ширина: 1см;
высота: 1см;
/* Вертикальное выравнивание по умолчанию — `baseline`, что оставляет несколько пикселей пространства под значком.
Использование `center` предотвращает это. Для значков, отображаемых рядом с текстом, вы можете использовать более точное значение, например. `vertical-align: -4px` или `vertical-align: -0.15em`. */
вертикальное выравнивание: посередине;
/* Пути и штрихи, выходящие за пределы окна просмотра, могут отображаться в IE11. */
переполнение: скрыто;
} С этим кодом по умолчанию ваши значки SVG должны быть маленькими и использовать цвет текста родителя. Вот так:
Первый ряд значков с размером текста и цветом по умолчанию
Второй ряд значков с увеличенным размером текста и зеленым цветом текста
Иконки с нашим стилем по умолчанию. Единственное различие между верхней и нижней строкой — это размер шрифта и цвет контейнера. Если формы значка не наследуют цвет текста родителя ( currentColor ), убедитесь, что у вас нет жестко закодированного заполните атрибутов в коде вашей иконки.
Почему бы не стилизовать селектор
svg напрямую? На странице могут быть другие элементы SVG, не являющиеся значками.
Например, большая карта SVG или интерактивная игра SVG. Другая причина заключалась в том, что в старых версиях Firefox (до Firefox 56) была ошибка с селектором svg (он применялся внутри элемента ), и таргетинг на класс позволял избежать этой проблемы.
Не стесняйтесь использовать 9Селектор 0035 svg вместо .icon , если вы считаете, что это сработает для вашего варианта использования.
Переопределение базовых стилей
Должно быть легко переопределить наши базовые стили в определенном контексте:
.ShareComponent .icon {
/* Изменяем ширину и высоту */
размер шрифта: 40px;
/* Изменяем цвет заливки */
цвет: фиолетовый;
/* Измените выравнивание по вертикали, если вам нужна большая точность
(иногда требуется для идеального пиксельного рендеринга) */
вертикальное выравнивание: -4px;
} Унаследованные стили SVG
Многие свойства стиля SVG наследуются. Например, когда мы устанавливаем свойство CSS fill для содержащего элемента, оно переходит к нашим , и другим графическим элементам.
Мы можем использовать эту технику и для других свойств CSS SVG. Например, свойства обводки:
.icon-goldstar {
заливка: золото;
штрих: коралловый;
ширина хода: 5%;
линия обводки: круглая;
} Значок звезды со стилем по умолчанию и пользовательским стилем В большинстве случаев мы не собираемся менять много вещей: только свойство fill для основного цвета, а иногда мы добавим или подправим обводку (что-то вроде границы).
Два цвета заливки для значка
Существует довольно простой метод, который позволяет значку иметь два набора контуров с двумя разными значениями заполнения (то есть двумя цветами).
<путь д="…" /> символ>
.icon-биколор {
заливка: rebeccapurple;
цвет: средне-бирюзовый;
} Два цветных значкаСовет: оставьте место для штрихов
Помните, мы говорили, что нужно оставлять место вокруг фигур? Это особенно важно, если вы планируете использовать штрихи.![]()
.icon-strokespace {
заполнение: нет;
обводка: текущий цвет;
ширина хода: 5%;
} В SVG штрихи всегда рисуются с обеих сторон контура (внутри и снаружи). Если ваш путь касается границ области просмотра, половина штриха будет обрезана.
В этом примере первая иконка не имеет зарезервированного пустого пространства по бокам, а вторая иконка имеет маленькое (0,5px, для области просмотра 15px).Совет: используйте проценты для
stroke-width Определение правильного размера штриха может быть сложной задачей. Посмотрите на эти два примера, где мы установили stroke-width:1px для элемента :
Что происходит? Свойство stroke-width принимает значение «длина», но это значение относится к .0017 локальные координаты вашей иконки. В приведенных выше примерах:
- Первая иконка имеет размер 20 на 20 пикселей
viewBox. Таким образом, обводка в 1 пиксель составляет 1/20 размера значка, большая, но не слишком большая.
- Вторая иконка имеет размер 500 на 500 пикселей
viewBox. Таким образом, обводка в 1 пиксель составляет 1/500 размера иконки, и это действительно очень мало.
Если все ваши иконки используют похожий viewBox , это не проблема. Но если они могут сильно отличаться, используя пиксельные или безразмерные значения ( stroke-width:1 ) отсутствует. Что нам делать?
Проценты могут быть хорошими. Тот же пример, но с stroke-width:5% :
Вот это уже лучше. (Для квадратных значков stroke-width:N% будет работать идеально, но обратите внимание, что он может вести себя немного иначе для больших или высоких элементов SVG.)
Расширенные темы и приемы
В предыдущих разделах у вас должно быть все. вам нужно знать, чтобы использовать значки SVG. В следующем разделе добавлена более подробная информация, возможно, с меньшим количеством реальных приложений.
Избегайте очень больших нестилизованных значков
Что произойдет, если ваша основная таблица стилей не загрузится из-за нестабильного соединения, например, в поезде (со мной это происходит постоянно)? Страница может по-прежнему отображаться без стилей.
Если у вас приличная структура HTML, страница все равно будет читабельной, но ваши значки будут очень большими.
В последних браузерах размер элемента по умолчанию составляет 300 на 150 пикселей. Другие браузеры могут дать ему гигантскую 100% ширину! Я рекомендую поместить это в ваших страниц:
Коротко и понятно.
Другой подход заключается в том, чтобы всегда использовать атрибуты ширины и высоты для элементов SVG. Это работает, но если вам нужно изменить размер этого значка в CSS, это может быть немного сложнее.
Предварительная загрузка внешних спрайтов
В разделе «Добавление значков на ваши страницы» мы говорили, что значки из внешнего спрайта могут отображаться с некоторым опозданием, отчасти из-за сканера предварительной загрузки браузера (или упреждающего просмотра).
предварительный анализатор или что-то еще), не подбирая это означает, что есть важный файл для ранней загрузки.
Что мы можем с этим сделать?
Стандартное и будущее решение: добавьте
встраницы (подробности о предварительной загрузке, поддержке в ближайшем к вам Chrome и, надеюсь, в других браузерах в будущем).Старое школьное решение: добавьте
в начале.
На самом деле я не тестировал эти решения, обычно компромисс «встроенный + внешний» дает достаточно хорошую производительность, поэтому нам не нужно полагаться на предварительную загрузку. Но это стоит исследовать.
Выбор отдельных фигур или контуров
Мы рассмотрели способы настройки заливки, обводки и т. д. для всех контуров из и двух или более цветов из разных контуров.
Но что, если бы мы могли выбирать определенные пути (возможно, используя классы) непосредственно в экземпляр из ? Является ли это возможным?
Прямо сейчас ответ: да и нет.
- Если вы используете внешние спрайты, вы не можете выбрать отдельные пути (или другие элементы) внутри используемого
. - Если вы встраиваете свой спрайт, вы можете выбирать и стилизовать элементы внутри спрайта, но эти стили будут применяться ко всем экземплярам символов.
Таким образом, даже со встроенным спрайтом вы можете сделать следующее:
#мой-символ .style1 {
/* Стили для одной группы путей */
}
#мой-символ .style2 {
/* Стили для другого */
} Но так нельзя:
.MyComponent-button .icon .style1 {
/* Для 1 группы путей для этой иконки в данном контексте */
}
.MyComponent-кнопка .icon .style2 {
/* Для другой группы */
} В будущем может появиться стандартный способ, позволяющий выбирать через Shadow DOM, но это совсем не точно (раньше был комбинатор /deep/ , но его убрали).
Более двух цветов с помощью пользовательских свойств CSS
Таким образом, мы можем легко изменить цвета наших значков SVG из CSS, для одноцветных значков (просто) и двухцветных значков (требует некоторой подготовки). Есть ли способ, которым мы могли бы иметь многоцветные значки с более чем двумя настраиваемыми цветами ?
Возможно, мы сможем сделать это с помощью пользовательских свойств CSS (они же CSS-переменные). Это требует большой подготовки на стороне SVG:
символ>
Для этой демонстрации я украл иконку из превосходного Iconic, который предлагает отзывчивые, многоцветные иконки SVG (на основе CSS и немного JS, насколько я понимаю). Я попытался сымитировать их собственный многоцветный пример для этой иконки, надеюсь, они не против.
См. в Firefox, Chrome или Safari 9.1+
Довольно хорошо работает в поддерживаемых браузерах. Есть только одна иконка: первый экземпляр не объявляет ожидаемые переменные, поэтому возвращается к currentColor; следующие два экземпляра объявляют набор значений переменных.
Как вычисляются проценты
ширины штриха ? Чему соответствует процент в stroke-width:N% ? Это ширина, высота значка? Оказывается, это относительно диагонали, но с причудливой формулой (spec) (длина диагонали, деленная на квадратный корень из 2, что близко к 1,4).
Что это значит? Что ж, для квадратных значков результатом этой формулы является сторона квадрата. Итак, 1% означает «один процент ширины или один процент высоты». Красиво и просто.
Однако для более широких или высоких значков результат может немного измениться:
Во втором значке (соотношение сторон 2:1, показанное с той же высотой и в два раза больше), stroke-width:5% дает нам обводку примерно: 7,91% высоты и 3,95% ширины. Учитывая все обстоятельства, я по-прежнему рекомендую использовать процентные значения для stroke-width . Если вы придерживаетесь квадратного или круглого значка, вы можете использовать процентные значения, понимая, что они означают, грубо говоря, «процент от ширины значка».
Использование градиентной заливки
Мы не можем использовать CSS linear-gradient(…) , потому что это, к сожалению, не применимо к свойству SVG fill . Если нам нужны градиентные заливки, нам нужно будет использовать градиенты SVG.
svg-icons · Темы GitHub · GitHub
Вот 781 публичный репозиторий соответствует этой теме…
ФортПотрясающе / Шрифт-потрясающий
Звезда 71кпростые иконки / простые иконки
Звезда 15,1кстолик / табличные иконки
Звезда 14,5кслабый / SuperTinyIcons
Спонсор Звезда 13,8киконки реакции / иконки реакции
Звезда 9,3кастрит / css.
gg Спонсор
Звезда
9кальра / браузер-логотипы
Звезда 5,8кзлые иконки / злые иконки
Звезда 5кДанкламмер / значки размера байта
Звезда 3,8кlucide-значки / ясный
Звезда 3,7кмиукимиу / реагировать-кавайи
Звезда 2,8кSpothq / криптовалюта-иконки
Звезда 2,4кАтисауд / значки
Звезда 2,2ккоруи / coreui-иконки
Звезда 1,9квебкул / яркий
Звезда 1,8кИконскаут / юниконы
Звезда 1,3квкарампинис / удивительные иконки
Звезда 1кЛеунгвенсен / svg-значок
Звезда 985антонрешетов / vue-unicons
Звезда 973монокомпания / моноиконки
Звезда 971Улучшить эту страницу
Добавьте описание, изображение и ссылки на
svg-иконки
страницу темы, чтобы разработчикам было легче узнать о ней.![]()

