Svg иконки: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

Вставьте эти файлы .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 есть еще несколько полезных трюков, узнать о них подробнее можно в официальном репозитории.

Использование 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 и т. д.), возникает соблазн просто добавить его в свой проект. Тем не менее, я считаю, что небольшая переделка в вашем любимом инструменте, чтобы убедиться, что точно соответствует , может избавить вас от некоторых головных болей и улучшить результат.

Работа с новым документом или монтажной областью

Создайте новый документ или новую монтажную область в своем любимом инструменте и скопируйте и вставьте значок в центр. Это отличный способ убедиться, что ваша иконка чиста и не имеет множества скрытых путей.

Квадрат проще

Ваш значок не обязательно должен быть квадратным , но с квадратными значками легче работать (если только ваш значок или графика не очень широкие или очень высокие).

Точные размеры имеют значение только в том случае, если вы хотите микроуправлять подгонкой пикселей (чтобы получить максимально четкие результаты на экранах с низким разрешением). Например, если все ваши значки могут поместиться на сетке 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, и сравните код до и после, чтобы увидеть, что было удалено или упрощено.

Удалить данные о цвете

Для одноцветных значков убедитесь, что:

1. В исходном файле пути черные ( # 000000 ).
2. В экспортированном коде нет заполнения атрибутов.

Если у нас есть жестко запрограммированные заливки в исходном коде SVG, мы не сможем изменить эти цвета в нашем коде CSS. Так что вообще лучше их удалить, по крайней мере для одноцветных иконок.

Illustrator не выводит атрибуты fill для полностью черного контура ( # 000000 ). Sketch делает это, поэтому вам, возможно, придется открыть экспортированный код SVG и вручную удалить атрибуты fill="#000000" .

Создание спрайта SVG

В этой части много кода, но на самом деле она совсем не сложная. Мы хотим создать документ SVG, содержащий элементов. Каждый

Я называю этот SVG-документ спрайтом (имея в виду спрайты в компьютерных играх и CSS), но его также можно назвать листом спрайтов или хранилищем символов.

Вот спрайт с одним значком:

Добавление значка к нашему спрайту

Допустим, Illustrator дал нам этот код для значка, показанного выше:

Мы можем немного упростить его (вручную или с помощью SVGOMG), сохранив только Атрибут viewBox и основные данные:

  w3.org/2000/svg" viewBox="0 0 15 15">
  
 

Теперь мы можем скопировать и вставить его в наш спрайт. Нам нужно преобразовать элемент в элемент и вставить его вручную в наш спрайт:

Вы можете сделать это вручную для всех ваших значков, но есть инструменты, которые автоматизируют этот процесс. Мы используем 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-код, который мы можем использовать:

Что может выглядеть так:

Теперь мы собираемся сделать этот HTML-код немного более подробным, чтобы его было легче стилизовать, а также сделать его более доступным. Сначала я покажу несколько общих шаблонов, а затем мы объясним каждый технический выбор.

Шаблон A: чисто декоративный значок

Шаблон B: ссылка или кнопка со значком и текстом

 
  
  Последние новости
 

Шаблон C: ссылка или кнопка со значком

Это то же самое, что и (B), но мы хотим показать только значок. Мы по-прежнему должны сохранять текст, чтобы пользователи программ чтения с экрана могли его прочитать.

 
  
  Последние новости
 

Шаблон D: значок и замещающий текст вне ссылки или кнопки

Например, если у нас есть столбец таблицы со значками, представляющими «Да» и «Нет»:

 
   svg#check">
  
  Да
 

Что делают наши различные части HTML?