Иконки svg: Иконки Bootstrap · Библиотека SVG-иконок с открытым исходным кодом

Разное 

Содержание

Компактные Vue компоненты из самописных SVG иконок / Хабр


В этой статье пойдёт речь о том, как я пришёл к тому, чтобы взяться писать плагин, создающий на лету vue компоненты из самописных svg иконок во время сборки проекта, о том, как я это делал, и о том, что в итоге получилось.

Мне уже давно и прочно нравится мир Vue. Особенно завораживает скорость, с которой в нём рождаются новые возможности писать код более лёгким и понятным. Недавно появились Composition API, VueUse, Vite… По ходу освоения этих новых инструментов я нашёл шаблон Vitesse, буквально насыщенный удобными средствами — и для управления макетами (layout), и для маршрутизации, и для локализации и ещё для много чего… Возможно, есть смысл написать отдельный обзор этого арсенала по русски (чего в Интернете пока ещё нет). Но сейчас речь не об этом.

Среди интересных вещей из Vitesse есть плагин unplugin-icons, который позволяет вставлять на страницу, в качестве vue компонентов, иконки из популярных наборов, таких как Font Awesome, Material Design Icons и других.

Он работает через сервис Iconify, объединяющий более 90 наборов с 100 000+ иконками. Этот плагин помогает создать компонент, имя которого образует название набора + название иконки. Например такой:

<mdi-dog-side />

Регистрировать его не нужно. Просто в правильном месте пишем в угловых скобках правильное имя и получаем на странице желаемую картинку


Всю прочую работу по внедрению нужной пиктограммы из Интернета в нашу сборку плагин выполняет сам.

То, с чем я сталкивался прежде, например во фреймворке Quasar, выглядело не так элегантно:

<q-icon name="mdiDogSide" />

Но эти мысли приходят уже после знакомства с unplugin-icons. Раньше это как-то не осознавалось. Просто не встречался подход, при котором формирование компонента картинки переносится с этапа монтирования Vue приложения на этап его сборки. Именно во время сборки этот плагин подготавливает под капотом и связывание, и регистрацию, опущенные в коде.

Кому-то может быть покажется, что этим нарушается идеология компонентного подхода. Это правда. Код начинает жёстко зависеть от сборки. Но, с другой стороны, файловые компоненты Vue так или иначе должны обрабатываться сборщиком.

Что же касается удобства работы с кодом, то можно сказать, что явно прописанные импорты и регистрация компонентов удобны для анализа связей, особенно в чужом коде, когда с помощью средств IDE мы можем легко переходить к определению какой-либо сущности.

Но это обычно критично для компонентов, которые разрабатываются внутри нашей кодовой базы. Код компонентов, которые пришли со стороны и которые мы заведомо модифицировать не будем, можно рассматривать, как чёрный ящик, происхождение и функциональность которого понятны, но содержимое которого нас не интересует. В этом случае конструкции импорта и регистрации только усложняют чтение кода, не добавляя в него полезного содержания.

Кроме идеологических проблем, остаётся одна чисто практическая — как быть, если вдруг потребуется мигрировать под другую систему сборки? В данный момент эта проблема, как будет описано ниже, тоже уже в основном решена.

В общем, unplugin-icons я для себя оценил. Одно плохо: не всегда даже среди 100 000+ иконок можно найти нужную, если приложение касается какой-то специфичной предметной области, или предполагает нестандартный набор действий пользователя. Допустим, нужна пиктограмма, обозначающая заключение договора. Такую готовую можно найти без проблем. Но если вы работаете с разными типами договоров, и каждый тип хотелось бы представить своей графикой, то вам не обойтись без собственных художеств. Придётся рисовать / заказывать дизайнеру свои самописные иконки. А с ними-то этот плагин и не работает.


Я стал разбираться с тем, что у unplugin-icons под капотом, надеясь найти способ как-то всё-таки «подсунуть» ему самописные иконки, и выяснил при этом интересную вещь. Плагин unplugin-icons для создания компонента иконки использует другой инструмент — плагин unplugin-vue-components. Этот инструмент в процессе сборки перехватывает имена всех незарегистрированных компонентов и пытается с ними разобраться. Для этого он использует внешние функции-резолверы. Резолверы регистрируются в этом плагине в конфигурационном файле сборщика.

Получается что у unplugin-vue-components есть массив, в котором прописаны все функции-резолверы, задача которых — каждый раз распознавать и перехватывать из набора незарегистрированных компонентов те, за которые отвечает именно этот резолвер, и после возвращать ссылку на файл с кодом, который соответствует перехваченному имени компонента. Если имя компонента не распознаётся данным резолвером, он возвращает null. Плагин в процессе работы последовательно скармливает резолверам имена незарегистрированных компонентов, и ждёт от них ссылки на файл, чтобы дописать в код импорт и регистрацию и отдать для дальнейшей обычной сборки. Если резолвер возвращает

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

Я понял, что для моей задачи это находка. Нужно просто написать резолвер, который будет принимать имена и проверять, не попалось ли среди них имя, которое соответствует какой-либо самописной svg иконке. Если попалось, нужно вытащить из кода этой иконки тег svg со всем содержимым (кроме svg тега там могут быть и заголовки вида <DOCTYPE ... > и/или <?xml ... ?> — в inline svg

они не вписываются), обернуть тегом <template> и сохранить в файл с именем, соответствующим имени компонента и с расширением .vue в служебной папке, после чего вернуть ссылку на этот файл.

То есть, я решил налету с помощью резолвера создавать из svg иконок vue компоненты, состоящие из одного только шаблона без скрипта и стилей.
Такой компонент не может иметь своих свойств, но может управляться с помощью css, о чём подробнее будет сказано ниже.

Я решил оформить резолвер в виде npm пакета, который должен содержать package. json, js файл с функцией-резолвером, файл деклараций TypeScript, readme и папку с примерами под разные варианты сборки для Vue 2 и для Vue 3. Резолвер не зависит от версии Vue, но плагин unplugin-vue-components в конфигурационном файле для разных версий подтягивается по-разному.

Также с самого начала было понятно, что функцию-резолвер, чтобы быть спокойным и не пропустить какой-нибудь досадный ляп, придётся тестировать под разные варианты сборки, и нужны автотесты, которые будут собирать контрольные примеры и проверять, подтянулись ли туда компоненты из svg иконок, или нет.

Набор контрольных тестов должен охватывать критичные с точки зрения возможных багов сочетания параметров резолвера и типов записи имён компонентов и иконок (

PascalCase, camelCase или kebab-case).

Контрольные примеры для тестов я поначалу решил сделать по совместительству и демонстрационными. Такое решение, как мне стало ясно только потом, оказалось ошибочным. В итоге кроликов на витрине и их подопытных собратьев пришлось разделить, о чём расскажу ниже.

У моего резолвера два параметра — путь к папке, где нужно искать иконки (в перспективе здесь можно будет указывать и массив), и префикс в имени компонента. Мне представилось логичным, чтобы использование префикса было таким же, как и у плагина unplugin-icons, то есть по умолчанию его значение равно

i, а если префикс не используется, то нужно явным образом для его значения указать пустую строку.

Общая картина его работы следующая:

С самого начала я делал модуль только под сборщик Vite, поскольку когда я приступил к работе, модуль unplugin-vue-components звался vite-plugin-components (сейчас этот пакет удалён из npm хранилища и переименован на github) и умел он работать только с Vite. Но в процессе написания я вдруг обнаружил, что этот модуль не только переименован, но и стал кроме Vite поддерживать и Rollup, и Webpack, и Nuxt, и Vue CLI.

Так оказалось, что стоя на плечах Anthony Fu, разработчика Vitesse и всех его плюшек, я тоже оказываюсь молодцом, и пишу пакет, который можно использовать под любой из этих систем сборки, поскольку кроме unplugin-vue-components, который теперь встраивается почти куда угодно, ему ничего другого не требуется.


Я решил, что функция резолвер слишком проста и мала, чтобы затевать сборку самого модуля. Поэтому отказался и от Typescript, и от каких-либо сторонних зависимостей в ней. Из вспомогательных алгоритмов требуется лишь перевод имен из PascalCase в camelCase и kebab-case, и из kebab-case обратно в

PascalCase. С этим хорошо справилась бы библиотека change-case, но я решил, что три самописных функции по десятку строк кода — не слишком дорогая цена за то, чтобы отказаться от сборки.

Настройка тестирования оказалась на порядок более трудоёмким делом, чем написание резолвера. Поскольку проверяется работа сборки, включающей тестируемый резолвер, необходимо перед тестами каждый раз возиться с переустановкой зависимостей для каждого тестируемого проекта. Далее, необходимо каждый проект собрать. И уже только после этого можно проверять, правильно ли он собрался.

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

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

В качестве среды тестирования я использовал Jest, а для монтирования страницы JSDOM. Код теста, также как и код bash скрипта, сканирует папку с тестируемыми проектами, и в каждом найденном проекте ищет итоговый html. В нём в теге <script> подтягивается результат сборки. У меня сложилось впечатление, что JSDOM не умеет подтягивать скрипты, если они объявлены, как модули. По крайней мере, я не нашёл, как это сделать. Поэтому в ходе выполнения теста из html файла приходится удалять атрибут type="module" а также заодно бесполезный в тестовых примерах crossorigin из тега <script>.

То есть заменять

<script type="module" crossorigin src="/bundle. js"></script>

на

<script src="./bundle.js" defer></script>

На деле тест просто полностью переписывает html файл из заготовленного шаблона, благо этот файл у всех тестовых проектов получается одинаковый.

После этого подопытный html скармливается JSDOM. Я не придумал и не нашёл хук, по которому можно отследить завершение монтирования, поэтому поставил простой setTimeout() на 100 мс. Это время намного превышает время реального монтирования, которое на моём компьютере составляет единицы миллисекунд. Здесь конечно происходит некоторое неоправданное торможение, но оно несопоставимо меньше времени, которое уходит на сборку (около 30 с для каждого тестового проекта).

И наконец, производится простая проверка на наличие в документе ровно двух элементов svg. Разумеется, сами тестовые проекты должны отвечать условию — содержать ровно две иконки, возможно, подключаемые разным путём. Мне показалось, что этого вполне достаточно, чтобы определить, попали иконки в сборку, или нет. 1.0.10″, … }

Поэтому я в итоге перенёс все тестовые проекты в отдельную папку, а в папке с примерами оставил два проекта на Vue 2 и на Vue 3 под Vite.


Получился модуль, выполняющий свою функцию, окружённый инфраструктурой с системой тестирования, линтинга, и примерами использования. Выкладывать целиком всю эту кучу ненужного на пользовательском проекте кода в npm хранилище было бы большим злодейством. Поэтому в корневом package.json определено поле files

  "files": [
    "index.js",
    "index.d.ts",
    "LICENSE"
  ],

Из всей массы кода пользователь в свой проект подтянет только необходимое — то, что перечислено в списке, и ещё package.json и readme.md, которые всегда подтягиваются по умолчанию.


Поскольку речь идёт о самописных иконках, мы можем, не вмешиваясь в графику, модифицировать их техническую часть так, чтобы оптимизировать размер и, если нужно, заставить отрабатывать CSS стилизацию.

Размер SVG документы часто бывает неоправданно большим. Это получается из-за того, что редакторы векторной графики явно прописывают в них все заданные по умолчанию свойства каждого элемента. Для каждого элемента прописывается id, который нигде не используется. Создаются блоки с метаинформацией, которая нужна редактору, но совсем не нужна для inline SVG.

Удалять вручную весь этот мусор — дело рутинное и долгое. Лучше воспользоваться специальным инструментом, таким, например, как svgo.

Если мы хотим показать картинку как есть, с ней можно больше ничего не делать, но если нам нужно играть размером / цветом, то нам нужно её немного доработать.

Чтобы у нас появилась возможность управлять размером, нужно значение атрибутов width и height в тэге svg установить равным 1em.

<svg xmlns="http://www.w3.org/2000/svg" ... ...>

Размер иконки после этого будет управляться свойством font-size.

Для обеспечения управления цветом монохромных иконок (рецепт только для монохромных), нужно выполнить следующее:


  1. Избавится от линий ненулевой толщины. Для этого необходимо преобразовать их в фигуры (shape). Это проще всего сделать в каком-либо редакторе векторной графики, например, в Inkscape.
  2. Удалить из документа все указания на заливку, как в атрибутах fill (вместе с этими атрибутами), так и внутри атрибутов style. В большинстве случаев style также можно спокойно удалить целиком (вряд ли в иконке потребуется информация о шрифтах и т.п.).
  3. В элементе svg задать атрибут fill="currentColor":
<svg xmlns="http://www.w3.org/2000/svg" ... fill="currentColor" ...>

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


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

Надеюсь, что статья кому-то принесёт пользу и как повод для знакомства с новыми событиями в мире Vue, и как обзор по написанию резолвера под unplugin-vue-components, что может потребоваться для каких-то других целей. И, наконец, надеюсь, что кто-то с подачи этой статьи станет использовать в деле и сам плод моего труд — пакет custom-icons-resolver.


Это моя первая серьёзная публикация на Хабре. Буду признателен всем местным жителям за конструктивную критику и советы.

И ещё. Я уже писал, что часть моего сердца принадлежит миру Vue. Хочу найти работу в команде, где тоже любят мир Vue, и бережно за ним ухаживают. Мой уровень отчасти виден по данной работе. Думаю, что могу быть полезным игроком в команде.

Мои контакты можно найти в моём профиле.

Бесплатные SVG иконки

HTML CSS Инструменты Иконки Контакты
    org/BreadcrumbList»>
  1. Главная
  2. Бесплатные SVG иконки
Правила пользования иконками

© 2021 pautina. io

Описание и примеры стандартных функций SVG

Доминирующей причиной появления этого блога стало незаслуженное забвение на целых десять лет языка разметки масштабируемой векторной графики – SVG (Scalable Vector Graphics), входящего в подмножество расширяемого языка разметки XML.
Стандарт SVG 1.0 был принят в качестве спецификации Консорциумом Всемирной паутины (W3C) в сентябре 2001 г. Стандарт SVG 1.1 и его версии SVG mobile profiles (SVG Basic and SVG Tiny) были приняты консорциумом в качестве рекомендации в январе 2003 г.
Сейчас ведутся работы по созданию стандарта SVG 2.0

Основные преимущества формата SVG.

Я не буду долго распространяться о преимуществах векторной графики перед растровой в вебдизайне, замечу лишь, что, однажды созданный, файл в формате SVG одинаково хорошо выглядит без потери качества и на мобильном устройстве и на станционарном мониторе домашнего ПК.
Шапка данного сайта выполнена в формате SVG, попробуйте уменьшить окно браузера до минимальных размеров, картинка на “лету” будет также пропорционально уменьшаться.
SVG – это двухмерная графика и тем не менее это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Incscape , Adobe illustrator, CorelDRAW

Бесконечное полотно документа svg.

Итак, как происходит формирование векторного изображения.
Документ формата SVG – это двухмерный объект, который может иметь бесконечные координаты, как в положительном, так и в отрицательном направлении по осям X и Y. Также документ SVG имеет две области просмотра: viewport – системная область просмотра и viewBox – пользовательская область просмотра, положение которой относительно начала системных координат viewport, может задаваться собственной, пользовательской системой координат. Другими словами окно просмотра viewBox, может быть перемещёно в любое место документа SVG, при этом берется фрагмент изображения под ним, который после процесса согласования между viewBox и viewport, возвращается обратно в системную область просмотра viewport, которую видит пользователь. Используя это свойство можно организовать вертикальную или горизонтальную прокрутку изображения, меняя параметры координат viewBox.

При уменьшении размера пользовательского окна просмотра viewbox можно пропорционально увеличивать фрагмент изображения в системной области просмотра или уменьшать его при увеличении размера viewbox.
Таким образом реализуется эффект лупы. Более подробно эти процессы разобраны в статье: Трансформация изображений SVG при изменении параметров Viewbox.

 

Взаимодействие SVG, XML с HTML, CSS, Jscript

В SVG, как и в HTML можно добавлять ссылки на внешние ресурсы. Но если в HTML одна картинка может служить только для одной внешней ссылки, то в SVG документ можно добавлять сколько угодно внешних ссылок . Картинка кликабельна.
Внутрь HTML страницы легко встраивается код SVG документа или целиком подключается внешний SVG файл. Можно наоборот, внутри SVG файла разместить код HTML внутри тегов foreignObject. Получаются интересные эффекты: Внутри SVG файла находится работающий внешний HTML сайт. К SVG формату можно подключать внешние таблицы стилей CSS 2.0, что позволяет управлять сразу несколькими файлами *.svg. Также вполне допустимо подключение стилей внутри файла *.svg внутри тегов style или использовать внутренние стили непосредственно внутри командных строк фигур и путей.
SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT).
Преобразуя XML-данные в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например визуализировать графики, круговые диаграммы, гистограммы и т.д.

Анимация и интерактивность SVG.

Анимация в SVG осуществляется при помощи языка SMIL (Synchronized Multimedia Integration Language). Также поддерживаются скриптовые языки на основе спецификации ECMAScript — это встраиваемый расширяемый язык программирования.
То есть всё находится в одном месте, внутри документа SVG, поэтому нет необходимости для подключения внешних библиотек.
На каждую отдельную фигуру или на целое изображение можно установить обработчик событий (клик, наведение мышки, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком. Наведите курсор мышки на кнопку“Start” на примере слева.
По событию mouseover на этой кнопке начнется анимация по команде begin=”startButton.mouseover” – движение цветных шариков по криволинейному пути. Закончится анимация либо через заданные в коде 16 секунд, либо в любой момент по наведению курсора мышки на цветные радиокнопки “Stop”. При этом каждая радиокнопка управляет своим объектом совпадающим по цвету. На рисунке ниже анимация начинается и заканчивается при нажатии клавиши мышки на кнопки GO и STOP. В этом случае работает событие click. Команда на запуск анимации – begin=”gO.click” и соответственно остановка – end=”stop.click”
Следующий пример анимации – плавная отрисовка картинки с нуля до полного изображения.

Уже встроенные в SVG языки программирования позволяют реализовать довольно сложные сценарии анимации. Но, в дополнение к этому есть еще более мощные средства для реализации интерактивности графики и ее анимации – это внешние библиотеки сторонних разработчиков: D3.js, BonsaiJS, Svg.js, Snapsvg.js

Еще примеры анимации ⇛

Недостатки SVG формата

  • С увеличением количества мелких деталей в изображении, быстрее растёт размер файла SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже имеет проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
  • Трудность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
  • В настоящее время SVG формат применяется в Интернете сравнительно мало, из-за недостаточной кроссбраузерности. Лучше всего обстоят дела у Mozilla Firefox со встроенным просмотрщиком SVG, так как ее разработчики находятся в рабочей группе Консорциума Всемирной паутины (W3C) по разработке и внедрению стандарта SVG. Хуже всего дела по поддержке формата SVG у Microsoft, которая покинула группу 2003 г. Для Internet Explorer – необходим Adobe SVG Viewer (ASV). С 9 версии IE частично поддерживает функции SVG.
    Браузеры Apple Safari, Google Chrome намного лучше поддерживают SVG, но не полностью, так как SVG – это большая спецификация (вдвое больше HTML 4.01), именно поэтому разработчики браузеров внедряют функции постепенно, от версии к версии. Но абсолютно все разработчики современных браузеров заявляют, что за форматом SVG будущее в области графики вебдизайна.


 

 

UPD. Добавлен новый раздел онлайн генераторы SVG кода path.
следующая: Структура SVG документа ⇛

Руководство по использованию SVG-фавикон

От автора: вы должны использовать SVG-фавикон. Они поддерживаются во всех современных браузерах уже сейчас. Кроме того, вам, вероятно, не нужны все эти ссылки и размеры иконок, которые вы копируете из проекта в проект. Давайте выясним, какой абсолютный минимум нам требуется.

Иконка

Основной иконкой может быть SVG любого размера. Тип type=»image/svg+xml» не нужен.

<link rel=»icon» href=»favicon.svg»>

<link rel=»icon» href=»favicon.svg»>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Mask-icon

Для Safari все немного по-другому. Вам нужно добавить mask-icon. Это также SVG, но он должен быть создан в одном цвете и размещен на прозрачном фоне. Браузер добавляет цвет атрибута.

<link rel=»mask-icon» href=»mask-icon.svg» color=»#000000″>

<link rel=»mask-icon» href=»mask-icon.svg» color=»#000000″>

Сенсорная иконка

Иконка для устройств iOS, а также иконки избранное, новая вкладка и многое другое. Вам нужен только размер 180 x 180, а атрибут sizes лишний.

<link rel=»apple-touch-icon» href=»apple-touch-icon.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon.png»>

Manifest

manifest.json предоставляет информацию о вашем веб-приложения или веб-сайте. Эти строки обязательны для прохождения теста Lighthouse. Иконки со ссылками используются Android и Chrome. Самый большой размер 512 x 512 — единственный, который нужен.

{ «name»: «Starter», «short_name»: «Starter», «icons»: [{ «src»: «google-touch-icon.png», «sizes»: «512×512″ }], «background_color»: «#ffffff», «theme_color»: «#ffffff», «display»: «fullscreen» }

{

    «name»: «Starter»,

    «short_name»: «Starter»,

    «icons»: [{

        «src»: «google-touch-icon.png»,

        «sizes»: «512×512»

    }],

    «background_color»: «#ffffff»,

    «theme_color»: «#ffffff»,

    «display»: «fullscreen»

}

Мета theme-color по-прежнему требуется для цвета браузера Android Chrome.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<meta name=»theme-color» content=»#ffffff»>

<meta name=»theme-color» content=»#ffffff»>

Это все

Вот и все, это все иконки, которые вам нужны для современных браузеров, все остальное не нужно. Можно добавить msapplication-TileImage, если вы хотите иметь другую иконку в плитке Windows , в противном случае используется apple-touch-icon. TileColorНе больше используется.

Все остальное

К сожалению, не все работают в современных браузерах, но это можно легко решить, поместив в корень сайта favicon.ico 32 x 32. Это будет работать везде, даже у вашей бабушки.

Темный режим

Чтобы закончить, вот совет для темного режима. Одним из преимуществ SVG-фавикон является то, что вы можете изменить цвет с помощью CSS. Используя медиа-запрос prefers-color-scheme, цвет иконки меняется для темного или светлого режима пользователя. Этот метод не будет работать с mask-icon, так как цвет находится в атрибуте, но Safari добавляет белый фон, если не хватает контраста.

<svg xmlns=»//www.w3.org/2000/svg»> <style> path { fill: #000; } @media (prefers-color-scheme: dark) { path { fill: #fff; } } </style> <path fill-rule=»evenodd» d=»M0 0h26v16H0z»/> </svg>

<svg xmlns=»//www.w3.org/2000/svg»>

    <style>

        path {

            fill: #000;

        }

        @media (prefers-color-scheme: dark) {

            path {

                fill: #fff;

            }

        }

    </style>

    <path fill-rule=»evenodd» d=»M0 0h26v16H0z»/>

</svg>

Результат

Вот итоговый результат. Скопируйте это в head сайта и не забудьте поместить в корень favicon.ico.

<meta name=»theme-color» content=»#ffffff»> <link rel=»icon» href=»favicon.svg»> <link rel=»mask-icon» href=»mask-icon.svg» color=»#000000″> <link rel=»apple-touch-icon» href=»apple-touch-icon.png»> <link rel=»manifest» href=»manifest.json»>

<meta name=»theme-color» content=»#ffffff»>

<link rel=»icon» href=»favicon.svg»>

<link rel=»mask-icon» href=»mask-icon.svg» color=»#000000″>

<link rel=»apple-touch-icon» href=»apple-touch-icon.png»>

<link rel=»manifest» href=»manifest.json»>

Автор: Antoine Boulanger

Источник: //medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

А вы уже используете SVG-фавиконки? Руководство для современных браузеров.

Вы должны использовать фавиконки в формате SVG. Они уже поддерживаются во всех современных браузерах.

Кроме того, вам не понадобятся куча ссылок на фавиконки разных размеров, которые вы копируете из проекта в проект. Давайте посмотрим, какой абсолютный минимум требуется сделать.

Иконка

Основным значком может быть SVG любого размера. Тип — type=»image / svg + xml», не требуется.

<link rel="icon" href="favicon.svg">

Mask-icon

Для Safari все немного по-другому. Вам нужно добавить mask-icon. Это тоже SVG, но он должен быть сделан при помощи только одного цвета и размещен на прозрачном фоне. Браузер добавляет цвет атрибута.

<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">

Touch-иконка

Фавиконка для устройств iOS, а также для избранного в браузере, для новой вкладки и многое другое. Вам нужен только размер 180 х 180, а атрибут размеров, теперь, будет излишен.

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Манифест

Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Он обязателен для успешного прохождения тестирования в Lighthouse. Указанная фавиконка используется для Android и Chrome. Самый большой размер 512 х 512 является единственным необходимым.

{
   "name": "Starter",
   "short_name": "Starter",
   "icons": [{
       "src": "google-touch-icon.png",
       "sizes": "512x512"
   }],
   "background_color": "#ffffff",
   "theme_color": "#ffffff",
   "display": "fullscreen"
}

Значение theme-color для тега meta по-прежнему требуется чтобы указать цвет для браузера Chrome Android.

<meta name="theme-color" content="#ffffff">

Сделано

Вот и все. Это все фавиконки, которые вам нужны для современных браузеров, все остальное не нужно, или не обязательно. Можно добавить msapplication-TileImage, если вы хотите использовать другой значок на “плитках” Windows, по умолчанию будет использован значок apple-touch-icon. TileColor больше не используется.

Остальные браузеры

К сожалению, не все пользователи работают в современных браузерах, но это можно легко решить, добавив файл 32 x 32 favicon.ico в корень вашего сайта. Это будет работать везде, даже у вашей бабушки.

Темный режим

На последок, вот совет для темного режима. Одним из преимуществ фавиконки в формате SVG, является то, что вы можете изменить ее цвет с помощью CSS. При помощи медиа-запроса prefers-color-color цвет вашей фавиконки меняется в зависимости от темного или светлого режима включенного у пользователя. Этот метод не работает с mask-icon, так как цвет фавиконки указан в атрибуте, но Safari добавляет белый фон, если контрастности недостаточно.

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    path {
      fill: #000;
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: #fff;
      }
    }
  </style>
  <path fill-rule="evenodd" d="M0 0h26v16H0z"/>
</svg>

Результат

Вот итоговый результат. Скопируйте это в head вашего сайта и не забудьте поместить favicon.ico в корневой каталог.

<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">

ключ icons — Mozilla | MDN

ТипObject
ОбязательныйНет
Пример
"icons": {
  "48": "icon.png",
  "96": "[email protected]"
}

Ключ icons определяет, какие иконки (значки) будет использовать ваше дополнение. Эти иконки будут использоваться при показе вашего дополнения в менеджерах компонентов, таких как Менеджер Дополнений.

Он содержит информацию вида ключ-значение со следующими данными: размер изображения в пикселях и путь к соответствующему изображению относительно директории, в которой содержится дополнение.

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

Вы должны указать по крайней мере одну главную иконку, в идеале размером 48х48 пикселей. Эта иконка будет использоваться по умолчанию в Менеджере Дополнений. Конечно, можно добавить иконки любого размера, и Firefox постарается найти лучшую из них для показа в разных компонентах.

Firefox учитывает разрешение экрана, когда выбирает иконку. Чтобы получить наилучший результат на мониторах с большим разрешением, использующих технологию Retina display, добавьте для каждой иконки версию с размерами в два раза больше.

Ключи в объекте icons определяют размеры иконок в пикселях, значения — относительный путь к файлам с изображениями. Этот пример содержит иконку размером 48х48 пикселей и увеличенную версию для мониторов высокого разрешения.

"icons": {
  "48": "icon.png",
  "96": "[email protected]"
}

В качестве иконки можно использовать файл SVG. Тогда браузер будет масштабировать иконку так, чтобы она подходила к компоненту, в котором она используется. Но есть два предостережения:

  1. В файле изображения должен быть определён viewBox. Например:
    <svg viewBox="0 0 48 48" ...
  2. Даже в том случае, если используется всего один файл, нужно определить его для разных размеров иконки в манифесте. Например:
    "icons": {
  "48": "icon.svg",
  "96": "icon.svg"
}

Если вы используете программу Inkscape или подобную ей для создания SVG, сохраняйте изображение как «Простой SVG». Иначе Firefox может запутаться во множестве специальных пространств имён и не отобразить картинку.

BCD tables only load in the browser

Лицензирование

— SVG Repo

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

SVG Repo — это открытый каталог иконок, векторных изображений и клипартов. Наши боты собирают значки SVG и индексируют их из различных известных источников, что упрощает пользователям поиск, поиск и редактирование значков. Кроме того, пользователи SVG Repo могут отправлять открытые векторы или свои визуальные работы для листинга.Это означает, что веб-сайт SVGRepo может называться прокси-дистрибьюторами или просто инструментами, упрощающими поиск значков / векторов.

Смотрите заголовки различных типов лицензий на нашем веб-сайте;

Лицензия на репо SVG

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

Контент, созданный путем преобразования или ремикса векторов и значков Public Domain и Open source с помощью SVG Repo или наших пользователей, автоматически попадает под действие этой лицензии.Также некоторые пользователи могут выбрать выпуск своей работы под этой лицензией по умолчанию.

Вам не нужно указывать ссылку на SVGRepo или любого автора для этого лицензионного контента.

Но мы были бы очень признательны, если бы вы добавили « иконок от svgrepo.com » со ссылкой на свою веб-страницу, раздел о вашем приложении и т. Д.

Вы свободны:

  • поделиться — копировать, распространять с ограничением и передавать произведение
  • для ремикса — для адаптации работы

На следующих условиях:

  • приписывание — автор или автор отказался от своего права, указание авторства не требуется, но приветствуется
  • , разделяют одинаково. — Если вы ремикшируете, трансформируете или расширяете материал, вы можете распространять свою работу по любой лицензии.
  • распространение — Вы не можете распространять материал аналогично веб-сайту SVG Repo, так как это
  • перепродажа — Вы не можете перепродавать материал за деньги как есть, но вы можете использовать его как часть коммерческого проекта

Если на отдельных страницах значков, проиндексированных на этом веб-сайте, не указано иное, все значки и векторы, распространяемые на этом веб-сайте, подпадают под действие данной лицензии.

Общественное достояние

(Как визуальное произведение) Эта лицензия также может называться «Без авторских прав» или CC0 1.0 Универсальное Посвящение ПД на нашем сайте.

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

Или произведение состоит из простой геометрии и не подлежит защите авторских прав из-за порога оригинальности (этот порог может варьироваться в зависимости от законодательства страны). Например, «Фигурка, в которой голова представлена ​​кругом, а другие части представлены прямыми линиями» не подлежит авторскому праву или переходит в общественное достояние.

Вы свободны:

  • поделиться — копировать, распространять и передавать произведение
  • для ремикса — для адаптации работы

На следующих условиях:

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

Если на отдельных страницах значков, проиндексированных на этом веб-сайте, не указано иное, простые значки, распространяемые на этом веб-сайте, являются общественным достоянием или являются открытым исходным кодом.

Чтобы узнать больше об этой лицензии, посетите эту страницу.

Открытый исходный код

(как исходный код или программное обеспечение) Эта лицензия также может упоминаться (конкретно) как MIT или GNU GPL на нашем веб-сайте.

Некоторые файлы SVG, распространяемые на этом веб-сайте, лицензируются по исходному коду, и в этих лицензиях будут указаны условия использования. Вкратце, открытый исходный код можно определить как позволяющий свободно использовать, изменять и распространять программное обеспечение

Лицензия MIT

Вы свободны:

  • поделиться — копировать, распространять и передавать произведение
  • для ремикса — для адаптации работы

На следующих условиях:

  • ответственность — автор не дает никаких гарантий и не несет ответственности
  • уведомление об авторских правах — копия лицензии или уведомления об авторских правах должны быть включены в программное обеспечение
  • , , общий доступ — Если вы ремикшируете, трансформируете или расширяете материал, вы можете распространять свою работу по любой лицензии.

Стандартная общественная лицензия GNU

Вы свободны:

  • поделиться — копировать, распространять и передавать произведение
  • для ремикса — для адаптации работы

На следующих условиях:

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

Чтобы узнать больше об этой лицензии, посетите веб-страницы MIT и GNU GPL.

Creative Commons

(Как любая творческая работа) Эта лицензия также может упоминаться на нашем веб-сайте как сокращение CC.

Для Иконок, лицензированных Creative Commons, вы можете копировать и распространять материал на любом носителе или в любом формате с указанием соответствующих ссылок и ссылки на лицензию.Условия могут отличаться в зависимости от типа.

Атрибуция CC BY

Вы свободны:

  • поделиться — копировать, распространять и передавать произведение
  • для ремикса — для адаптации работы

На следующих условиях:

  • авторство — вы должны указать соответствующий источник, предоставить ссылку на лицензию и указать, были ли внесены изменения
  • , , общий доступ — Если вы ремикшируете, трансформируете или расширяете материал, вы можете распространять свою работу по любой лицензии.

Атрибуция ПоделитьсяAlike CC BY-SA

Вы свободны:

  • поделиться — копировать, распространять и передавать произведение
  • для ремикса — для адаптации работы

На следующих условиях:

  • авторство — вы должны указать соответствующий источник, предоставить ссылку на лицензию и указать, были ли внесены изменения
  • , , одинаковые ресурсы — Если вы ремикшируете, трансформируете или дополняете материал, вы должны распространять его по той же лицензии.

Attribution-NonCommercial CC BY-NC

Вы свободны:

  • поделиться — копировать, распространять и передавать произведение
  • для ремикса — для адаптации работы

На следующих условиях:

  • авторство — вы должны указать соответствующий источник, предоставить ссылку на лицензию и указать, были ли внесены изменения
  • некоммерческий — запрещается использовать материал в коммерческих целях

Вы не обязаны соблюдать лицензию в отношении элементов материала, находящихся в общественном достоянии, или в тех случаях, когда ваше использование разрешено применимыми исключениями или ограничениями.

Чтобы узнать больше об этой лицензии и ее вариантах, посетите сайт creativecommons.org.

Об инструментах распространения, поиска и редактирования SVG Repo

SVGRepo распространяет весь контент под этим текущим доменным именем без каких-либо обязательств или гарантий, мы, как этот веб-сайт или компания, владеющая этим веб-сайтом, не несем ответственности за какие-либо юридические конфликты из-за неправильного использования любых лицензированных визуальных материалов, исходного кода или творческих работ.

Search Engine или этот веб-сайт и инструмент SVG Editor Tool (виджет боковой панели, который помогает пользователям редактировать значки и векторы SVG) на этом веб-сайте является частной собственностью, преобразование и принятие в значок или вектор SVG с помощью этого инструмента не подлежит гарантии, и это веб-сайт не несет ответственности за какие-либо юридические конфликты, связанные с ремикшированием лицензионных визуальных материалов, исходного кода или творческих работ.

Кроме того, обобщенные и процитированные лицензии на этой странице основаны на ссылках (предоставленных) каждой лицензии и не являются юридически обязательными. Для юридических целей перейдите по предоставленным ссылкам.

Последнее изменение этой страницы, внесенное 19 ноября 2019 г. и использование услуг этого веб-сайта после этой даты, означает, что вы понимаете и принимаете условия использования этого веб-сайта и перечисленных лицензий.

SVG-иконок — Готовые к использованию SVG-иконки для Интернета.





иконок SVG — W3C Design System

В этом разделе конкретно рассматривается использование встроенных файлов SVG в качестве значков.Использование файла SVG в качестве src из рассматривается отдельно.

Iconography использует SVG от Font Awesome.

Класс .icon по умолчанию использует относительную em-единицу и идеально подходит для использования значков, встроенных в текст, адаптируя размер значка к размеру шрифта родительского элемента. Значок можно легко разместить до или после текста, используя простой текстовый интервал.

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

Открыть эти базовые значки SVG в новой вкладке

HTML:

  


 Телефон





Телефон

¶ Регулировка расстояния между значками

Если вы хотите контролировать расстояние между значком и текстом, добавьте .with-icon - перед или . with-icon - после класса родительскому элементу. Это применяет стили inline-flex и alignment, чтобы все было хорошо выровнено, и использует поля для интервала. Он также обрабатывает текст с письмом справа налево, если это применимо. Выберите класс, который отражает правильный порядок значков и текста.

Открыть эти SVG-значки с интервалом в новой вкладке

HTML:

  



 Телефон







Телефон

¶Большие иконы

Если требуется встроенный значок, который заметно больше текста по умолчанию, используйте .with-icon - больше в родительском элементе и добавьте к значку класс модификатора .icon - large .Этот класс использует блок rem для указания размера относительно размера корневого шрифта.

Открыть эти значки SVG большего размера в новой вкладке

HTML:

¶Использование SVG

В предыдущих примерах показано, как включить значки в качестве встроенных SVG-файлов.Преимущества этого:

  • Исключает отдельный HTTP-запрос
  • SVG, добавленные в качестве фоновых изображений как часть шрифта значка, могут некорректно отображаться для пользователей режима высокой контрастности
  • У нас есть полный CSS-контроль над SVG с точки зрения цвета, анимации / переходов и управления контурами.

Однако встроенные SVG-файлы не кэшируются. Альтернативой является использование элемента SVG для ссылки на код из внешнего файла, который браузер может кэшировать.Это также улучшает читаемость разметки. Стилизация CSS по-прежнему возможна, хотя у нее есть некоторые ограничения — обязательно добавьте дополнительный класс и укажите его в CSS.

¶Обзор

Internet Explorer не поддерживает использование SVG с и внешним источником. Обходной путь JavaScript — SVG для всех — доступен, если поддержка этого браузера важна.

¶SVG Доступность

Настоятельно рекомендуется прочитать совет Скотта О’Хара по контекстной разметке доступных изображений и SVG.Ниже приводится краткое изложение этого совета.

Во всех предыдущих примерах SVG действовал как декоративный элемент и использует следующий шаблон разметки, который скрывает SVG от программ чтения с экрана и предотвращает перемещение клавиши Tab внутри SVG в Internet Explorer:

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

При использовании значка без видимой текстовой метки следует использовать следующий шаблон разметки для предоставления доступных имен:

  <кнопка>
    
     Поиск 



    
     Поиск

¶Недекоративный доступ к SVG-файлам

Если SVG используется в контексте, в котором он добавляет смысл контенту, тогда он не используется в качестве значка и требует другого шаблона разметки:

  
     Доступное имя

Обратите внимание, что путь и любые другие прямые дочерние элементы SVG должны получить атрибут aria-hidden = "true" , если они не содержат информации, которая должна быть сделана доступной.

шрифтов SVG и иконок | Руководство по доступности

SVG

SVG (масштабируемая векторная графика) кажется будущим веб-графики. Как векторные изображения в формате XML, SVG не зависят от разрешения и легко изменяются по размеру без ухудшения качества. SVG можно легко манипулировать и анимировать с помощью CSS и / или JavaScript. Таким образом, SVG отлично подходит для адаптивного дизайна и сокращает время загрузки страницы (в отличие от использования JPG, JPEG, PNG и т. Д.). Хотя SVG не полностью поддерживается некоторыми браузерами IE и собственными браузерами телефонов Android / Windows, есть признаки того, что это, скорее всего, скоро появится.

Лучшие Лрактики

SVG включен в тег
img

  • Включение SVG в тег img ничем не отличается от включения обычного изображения — всегда используйте тег alt для важных SVG!

  • Кроме того, поскольку SVG — это новый тип формата изображения, вы также должны включить ARIA role = 'image' , поскольку некоторые программы чтения с экрана будут пропускать тег alt для SVG без этой роли (в частности, iOS VoiceOver).

 1 
 Синий треугольник
  • Если SVG декоративный, используйте пустой alt = '' . Если вы этого не сделаете, программа чтения с экрана прочитает исходный тег, что ужасно звучит.
 1
Встроенный SVG

  • В выходной XML для SVG включите тег заголовка непосредственно под тегом svg.

  • Тег </code> для SVG должен быть кратким, как атрибут <code> alt </code> для изображения.</p></li><li><p> В тег SVG включите атрибут <code> aria-labelledby </code>, который указывает на тег <code><title> </code>.</p></li><li><p> Если имеется более одной фигуры, может быть хорошей идеей включить тег заголовка для каждой группы фигур.</p></li><li><p> Добавление тега <code> <desc> </code> (описание) в дополнение к тегу заголовка очень полезно для пользователей вспомогательных технологий.</p></li><li><p> На своем сайте Дадли Стори пишет, что «<code> <desc> </code> — это более подробное описание элемента SVG, содержащее его назначение или дизайн».</p></li><li><p> Пример тега <code> desc </code>: «Гистограмма, показывающая продажи компании по странам в миллионах долларов (США)».</p></li><li><p> Если ваш встроенный SVG декоративный, вам не нужно включать ни один из этих атрибутов.</p></li></ul><table><tbody><tr><td><pre> 1 2 3 4 5 6 </pre></td><td><pre> <svg aria-labelledby = "title"> <title lang = "ru"> Красный прямоугольник

    Иконочные шрифты

    Иконки могут передавать большой объем информации без необходимости выражать то, что вы имеете в виду, словами.Однако, чтобы убедиться, что шрифты значков доступны для всех ваших пользователей, подумайте о следующем:

    Лучшие Лрактики

    • Значок чисто декоративный : Если ваш значок чисто декоративный, добавьте атрибут aria-hidden = 'true' .
    • Значок важен с точки зрения контекста : Включите атрибут title и стилизованный диапазон текста программы чтения с экрана.
     1
2 
     
   Время до пункта назначения на велосипеде: 
 
     1
2
3
4 
     
    
    Любимый

    Инструменты и ресурсы

    @ ant-design / icons-svg — npm

    ⭐ Абстрактный узел значков SVG Ant Design.

    Проверить список всех значков.

    Установить 

     # use yarn
$ пряжа добавить @ ant-design / icons-svg

# или используйте npm
$ npm install @ ant-design / icons-svg --save

    Используйте адаптер библиотеки

    Руководство по взносам 贡献 指南

    См. Руководство по вкладам. Английский ｜ 中文

    Начать 

     импортировать {AccountBookOutlined} из '@ ant-design / icons-svg';
// или
// импортировать AccountBookOutlined из '@ ant-design / icons-svg / es / asn / AccountBookOutlined';

консоль.журнал (AccountBookOutlined);
// ==>
// {
// name: 'account-book',
// тема: 'очерченная',
//   значок: {
// тег: 'svg',
// attrs: {
// viewBox: '64 64 896 896 ',
// focusable: 'false'
//},
//     дети: [
// {
// тег: 'путь',
// attrs: {
// d:
// 'M880 184H712v-64c0-4.4-3.6-8-8-8-8h- ...'
//}
//}
//]
//}
//};

    Эта библиотека экспортирует все файлы SVG как IconDefinition .

     // типы.d.ts
экспорт типа объявления ThemeType = 'заполненный' | «изложил» | 'две тонны';

интерфейс экспорта AbstractNode {
  тег: строка;
  attrs: {
    [ключ: строка]: строка;
  };
  дети ?: AbstractNode [];
}

интерфейс экспорта IconDefinition {
  имя: строка; // стиль кебаба
  тема: ThemeType;
  значок:
    | ((primaryColor: строка, secondaryColor: строка) => AbstractNode)
    | AbstractNode;
}

    Помощники по рендерингу 

     импортировать {AccountBookFilled} из '@ ant-design / icons-svg';
импортировать {renderIconDefinitionToSVGElement} из '@ ant-design / icons-svg / es / helpers';

const svgHTMLString = renderIconDefinitionToSVGElement (AccountBookFilled, {
  extraSVGAttrs: {ширина: '1em', высота: '1em', заливка: 'currentColor'}
});

консоль.журнал (svgHTMLString);
// ==>
// '   '
     объявить функцию renderIconDefinitionToSVGElement (
  значок: IconDefinition,
  варианты ?: HelperRenderOptions
): нить;

interface HelperRenderOptions {
  заполнители ?: {
    primaryColor ?: строка; // по умолчанию # 333
    вторичный цвет ?: строка; // по умолчанию # E6E6E6
  };
  extraSVGAttrs ?: {
    [ключ: строка]: строка;
  };
}

    📱 5 лучших мест, где можно найти бесплатные значки SVG / CSS для ваших веб-сайтов

    Здравствуйте! 🤗

    1 неделя 👉 Опубликована 1 статья! #FollowMe

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

    Указанные ниже 5 веб-сайтов имеют открытый исходный код и не требуют регистрации.

    Быстрое сообщение: если вы знаете о других замечательных библиотеках, не стесняйтесь упоминать об этом в ответе.

    Лицензия: MIT
    Веб-сайт: tabler-icons.io
    Сделано: @codecalm

    Получите более 550+ настраиваемых бесплатных иконок SVG с иконками Tabler!

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

    Лицензия: MIT
    Веб-сайт: css.gg
    Сделано: @AstritMalsija

    Замечательная библиотека иконок с +700 бесплатными иконками на чистом #CSS.

    css.gg предлагает библиотеку значков, сделанных на CSS, совершенно бесплатно. Они очень хорошего качества, и выбор сделан не случайно. Вы сможете найти все, что захотите.

    Также доступен в SVG , SVG Sprite , стилизованных компонентах, форматах Figma и Adobe Xd.

    Лицензия: MIT
    Веб-сайт: Feericons.com
    Сделано: @colebemis

    Feather — это набор просто красивых иконок с открытым исходным кодом. Каждый значок построен в сетке 24×24 с упором на простоту, согласованность и гибкость.

    Лицензия: MIT
    Веб-сайт: undraw.co
    Сделано: @NinaLimpi

    Сайт undraw.co предлагает бесплатно коллекцию из 600 иллюстраций в формате SVG.Поисковая система позволяет отображать изображения, соответствующие вашему запросу. Для всего поиска или для выбранного изображения можно настроить цвет с помощью инструмента в правом верхнем углу.

    Лицензия: MIT
    Веб-сайт: heroicons.dev
    Автор: @steveschoger @adamwathan @username_ZAYDEK

    Список иконок SVG, созданных создателями @tailwindcss! +170 иконок в настоящее время, больше в будущем. Чтобы использовать эти значки, просто скопируйте исходный код нужного значка.

    Вуаааа!

    Вы используете другой сайт, которым стоит поделиться? Укажите это в комментариях ниже!

    Ура 🍻 🍻 🍻

    Как использовать значки SVG в React с значками React и Font Awesome

    Иконки — это способ визуально передать концепции и значения без использования слов. Это может быть категоризация, действие или даже предупреждение.

    Как мы можем добавить значки с помощью SVG в наши приложения React, чтобы улучшить нашу визуальную коммуникацию?

    Что такое SVG?

    SVG — это масштабируемая векторная графика.Это формат файла, основанный на языке разметки, подобном XML, который позволяет разработчикам и дизайнерам создавать векторные изображения, используя определения путей.

    Что делает SVG отличным для Интернета?

    SVG родился для Интернета. Это открытый стандарт, созданный W3C, чтобы обеспечить лучший способ добавления изображений в Интернет. Если вы откроете файл SVG на своем компьютере, вы можете быть удивлены, обнаружив, что это весь код!

    Это играет роль в маленьком размере файла. Обычно при использовании SVG можно воспользоваться преимуществом его меньшего размера по сравнению с файлами изображений большего размера, которые могут потребоваться для обеспечения такого же высокого разрешения.

    Кроме того, поскольку мы определяем SVG как пути, они могут масштабироваться настолько большими или маленькими, насколько мы хотим. Это делает их более гибкими для использования в Интернете, особенно при адаптивном взаимодействии.

    Что будем создавать?

    Сначала мы рассмотрим пакет, называемый response-icons, который позволит нам легко импортировать значки из популярных наборов значков, таких как Font Awesome, прямо в наше приложение.

    Мы также рассмотрим, как вручную добавлять файлы SVG прямо в наше приложение, копируя код файла SVG прямо в новый компонент.

    Часть 0: Создание приложения React

    В этом пошаговом руководстве вы можете использовать любой фреймворк React, который вам нравится, будь то Create React App или Next.js. Вы даже можете использовать существующий проект.

    Поскольку нам не нужно ничего особенного для добавления значков, я собираюсь использовать приложение create-react-app.

    Чтобы начать работу с приложением create-response-app, вы можете создать новый проект, используя следующую команду в своем терминале:

      yarn create response-app [название-проекта]
# или
npx create-response-app [название-проекта]

    Примечание: замените [имя-проекта] именем, которое вы хотите использовать для своего проекта.Я собираюсь использовать my-svg-icons .

    Когда у вас будет новое или существующее приложение, мы будем готовы к работе!

    Новое приложение Create React

    Часть 1: Добавление иконок SVG с иконками реакции

    Добавление иконок реакции в ваш проект

    Чтобы начать работу с иконками реакции, мы хотим установить ее в нашем проекте.

    Внутри вашего проекта выполните следующую команду:

      yarn add react-icons
# или
npm установить иконки реакции - сохранить

    Когда он будет завершен, мы должны быть готовы использовать его в нашем проекте.

    Выбор значков для проекта

    Одна из замечательных особенностей react-icons — это обширная библиотека, которую они делают доступной в одном пакете.

    У нас есть не только Font Awesome, но и Octicons, Heroicons, значки Material Design и многое другое на GitHub.

    response-icons Heroicons

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

    Если вы в основном используете Font Awesome для своего веб-сайта, это могло бы выглядеть немного странно и непоследовательно, если бы вы начали добавлять в микс плоские цветные значки. В конечном итоге вы хотите, чтобы люди могли легко определять шаблоны, которые вы создаете.

    Использование значков реакции в вашем проекте

    После того, как вы нашли значки, которые хотите использовать, теперь мы можем добавить их в наш проект.

    Веб-сайт

    react-icons позволяет нам легко найти имя значка, который мы хотим использовать для импорта в наш проект.

    Если мы хотим использовать значок ракеты Font Awesome, мы можем перейти к Font Awesome на боковой панели, выполнить поиск на странице по запросу «ракета» (CMD + F или CTRL + F), а затем щелкнуть значок, который скопирует его имя. в буфер обмена.

    Font Awesome rocket icon

    Мы также можем искать «ракета» в форме поиска в верхнем левом углу страницы, которая показывает нам результат «ракета» во всех наборах значков.

    Значки ракеты в значках реакции

    Теперь мы можем импортировать этот значок в наш проект. Подобно инструкциям в верхней части страницы response-icons, мы хотим импортировать этот конкретный значок из файла response-icons / fa , который относится к модулю React-icons Font Awesome.

    Добавьте следующее в верхнюю часть файла, в который вы хотите импортировать значок. Если вы используете новый проект create-response-app, вы можете добавить его в начало src / App.js .

      импорт {FaRocket} из 'react-icons / fa';

    Чтобы проверить это, давайте заменим логотип React нашим значком.

    Удалите компонент и вместо этого добавьте:

    А если перезагрузить страницу, мы увидим нашу ракету!

    Значок ракеты в приложении React

    Наша ракета не вращается, как логотип React, так что давайте это исправим.

    Добавьте класс .App-logo в компонент FaRocket :

    И ракета теперь должна крутиться!

    Значок вращающейся ракеты в приложении React

    Но он тоже маловат. Если мы заглянем внутрь src / App.css , мы установим высоту .App-logo от до 40vmin . Пока это работает, чтобы наш значок заполнял пространство, нам также нужно указать ширину для его заполнения.

    Добавьте следующее к классу .App-logo , чтобы добавить ширину:

      width: 40vmin;

    И хотя сейчас он, вероятно, немного великоват, мы выбрали более подходящий размер и у нас есть значок!

    Увеличен размер значка вращающейся ракеты в приложении React.

    Следуйте вместе с фиксацией.

    Часть 2: Добавление файлов SVG в компонент React вручную

    Иногда вы не хотите добавлять новую библиотеку только для того, чтобы получить значок. Иногда это персонализированный значок, которого нет в публичной библиотеке.

    К счастью, с React мы можем довольно легко создать новый компонент SVG, который позволяет нам добавлять наши пользовательские значки SVG куда угодно.

    Сначала давайте найдем значок.

    Хотя все Heroicons доступны внутри значков реакции, давайте возьмем их в качестве примера, так как здесь легко найти и скопировать некоторый код SVG.

    Перейдите на сайт heroicons.com и найдите значок, который вы хотите использовать в этом примере. Я собираюсь использовать «глобус».

    Найдя нужный значок, наведите на него курсор, и вы увидите варианты копирования этого значка в формате SVG или JSX и его копирования в формате JSX.

    Копировать как JSX в Heroicons

    Скопировав этот значок, создайте новый файл под src с именем Globe.js .

    Внутри этого файла мы создадим новый компонент под названием Globe и вставим наш SVG в этот компонент.

      импорт React из response;

const Globe = () => {
  возвращение (
    
      
    
  )
}

экспортировать глобус по умолчанию;

    Примечание: при копировании обычного SVG в компонент React он может не работать «как есть». Иногда файлы SVG включают классы CSS или атрибуты элементов, которые недопустимы с JSX.

    Если вы столкнетесь с ошибками, попробуйте исправить атрибуты и посмотрите в веб-консоль, чтобы увидеть предупреждения и ошибки, которые выдает React.Поскольку мы копировали как JSX, мы сразу же смогли заставить его работать.

    Теперь вернемся к src / App.js и импортируем наш новый компонент:

      import Globe from './Globe';

    Затем мы можем заменить наш значок ракеты на наш новый компонент:

    И если мы откроем наш браузер, мы сможем увидеть наш глобус!

    Большой значок земного шара в приложении REact

    Хотя он и великоват.

    Мы хотим применить наш .App-logo в наш компонент Globe, поэтому нам нужно обновить этот компонент, чтобы он принял свойство className .

    Вернувшись на src / Globe.js , добавьте аргумент свойства className :

      const Globe = ({className}) => {

    Затем добавьте новую опору с этим className к компоненту :

    Теперь мы можем обновить наш компонент Globe в src / App.js , чтобы включить этот класс:

    И если мы перезагрузим страницу, мы увидим, что наш логотип вернулся в правильный размер и снова вращается!

    Вращающийся значок глобуса нормального размера в приложении React

    Следуйте за фиксацией.

    Почему бы нам не включить его как файл img?

    Хотя мы можем включить его как файл изображения, как это делает React в код приложения create-response-app по умолчанию, мы получаем несколько преимуществ от добавления наших SVG-файлов «в строку».

    Например, при добавлении встроенного SVG мы можем получить доступ к различным путям с помощью свойств CSS. Это дает нам больше гибкости для его динамической настройки.

    Он также будет предоставлять меньше HTTP-запросов. Браузер знает, как загрузить этот SVG-файл, поэтому нам не нужно беспокоить браузер, чтобы запросить этот файл для включения на страницу.

    Тем не менее, это все еще допустимый вариант для добавления файла SVG на страницу.

    No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *