Icon svg: Крупнейшая база данных бесплатных иконок, доступных в форматах PNG, SVG, EPS, PSD и BASE 64.

Хотя большинство из этих файлов можно и просто положить в корень вашего сайта, а соответствующие приложения выберут, что им необходимо, не прописывая все их в явном виде в HTML, все же это не самый удачный подход. Слишком много контента нужно создать, а потом еще и обслуживать. Один масштабируемый файл будет работать намного лучше. К примеру, логотип нашего сайта сохранен в формате favicon.svg:

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

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

<svg xmlns=»//www. w3.org/2000/svg» viewBox=»0 0 500 500″> <title>the new code favicon</title> <polygon points=»201.4,0 96.5,69.1 201.2,141.1 298.5,69.1″ fill=»#f06823″/> <polygon points=»97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5″ fill=»#f4e302″ /> <polygon points=»60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9″ fill=»#2f8bca» /> </svg>

И выглядит так:

Фавикон можно добавить строкой кода между тегов head:

<link rel=»icon» type=»image/svg+xml» href=»favicon. svg»>

Несколько замечаний:

Составляющие рисунка выполнены отдельными, не перекрывающими друг друга фигурами: значок должен иметь размер 16х16 пикселей. Тут важны простота и четкость.

По тем же самым причинам фон в SVG иконке прозрачный, так что ее можно использовать в различных ситуациях.

Viewbox для SVG должен быть квадратным.

Рисунок должен занимать наибольшую площадь на viewBox’е (холст в SVG).

Тег <title> описывает цели, для которых предназначен рисунок; также стоит добавить <desc> и <title> для каждого полигона <polygon>.

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

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

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

Чтобы SVG заработал необходимо указывать MIME тип image/svg+xml.

Добавляем поддержку iOS

В iOS 9 также поддерживаются SVG фавиконы в закрепленных закладках, но с некоторыми оговорками:

Элементы SVG должны быть черного цвета.

В ссылке на фавикон должен быть указан неофициальный атрибут mask-icon.

Не обязательно, но цвет можно изменить также с помощью неофициального атрибута color. Поддерживаемые значения hexadecimal, keyword и rgb. Не рекомендуется использовать яркие цвета.

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

<svg xmlns=»//www.w3.org/2000/svg» viewBox=»0 0 500 500″> <title>the new code favicon</title> <polygon points=»201.4,0 96.5,69.1 201.2,141.1 298.5,69.1″ /> <polygon points=»97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5″ /> <polygon points=»60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9″ /> </svg>

Чтобы это заработало на iOS, добавляем строку:

<link rel=»mask-icon» href=»icon.svg» color=»blue»>

Собираем мысли вместе

Предположим, что вам больше не нужно поддерживать IE8 и более ранние версии, значит, формат .ico можно выбросить, а браузерам оставить файл PNG. Чтобы фавикон отображался во всех браузерах и не забыть про SVG, расположим ссылки в следующем порядке:

<link rel=»icon» type=»image/png» href=»favicon.

Мы отказались от использования формата .ico: если бы мы положили в корень сайта файл favicon.ico, то браузеры использовали бы его вместо остальных, и не важно какие директивы вы указали в хедере.

Для iOS и IE все еще нужно указывать отдельные иконки; SVG в данных браузерах еще не работает.

Заключение

SVG как будто создан для фавиконов, и остается только надеяться, что в скором будущем и Chrome будет его поддерживать. Идеальным было бы, чтобы в одном SVG файле для различных степеней детализации и размеров использовались разные элементы <symbol> или <use>… хотя мы и так уже хотим слишком многого.

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

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

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

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

PSD to HTML

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

Описание и примеры стандартных функций 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 viewBox="0 0 32 32" xmlns="http://www. w3.org/2000/svg">
	<g><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M17,7h25v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z"/></g>
</svg>

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
</svg>

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><path d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/><path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.54-6.53-1.42-1.42-6.53,6.54Z"/></g>
</svg>

У SVG есть несколько элементов-контейнеров – <g>, <defs> и <symbol>, лучшим для спрайтов является <symbol> т. к. он поддерживает все атрибуты как у <svg>.

Итак, нужно создать файл icons.svg, в нём будет общий контейнер <svg>...</svg>, далее в него помещаются изображения, с заменой <svg> на <symbol> оставляя все другие параметры и добавляется атрибут id для дальнейшего вывода.

<svg>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M17,7h25v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z"/></g>
	</symbol>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
	</symbol>
	<symbol viewBox="0 0 32 32" xmlns="http://www. w3.org/2000/svg">
		<g><path d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/><path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.54-6.53-1.42-1.42-6.53,6.54Z"/></g>
	</symbol>
</svg>

Вывод осуществляется с помощью элемента <use> с ссылкой на файл спрайта и id изображения.

<svg><use xlink:href="/icons.svg#icon-1"></use></svg>
<svg><use xlink:href="/icons.svg#icon-2"></use></svg>
<svg><use xlink:href="/icons.svg#icon-3"></use></svg>

Результат:

Минусы

• Если открыть файл спрайта в браузере, то изображения выводится не будут.
• В старых браузерах (до IE9) тег <use> не поддерживается. Но для них есть плагин https://github.com/jonathantneal/svg4everybody.

иконок Svg — скачать бесплатно, PNG и SVG

Иконки

Фото

Музыка

Иллюстрации

Милый монстр

+ Коллекция

Милый монстр

+ Коллекция

Милый монстр

+ Коллекция

Милый монстр

+ Коллекция

Милый монстр

+ Коллекция

Симпатичный монстр

Monster

+ Коллекция

Cute Monster

+ Коллекция

Cute Monster

+ Коллекция

Cute Monster

+ Коллекция

Cute Monster

+ Коллекция

Cute Monster

+ Коллекция

Cute Monster

+ Коллекция

+ Коллекция

Симпатичный монстр

+ Коллекция

Симпатичный монстр

+ Коллекция

Симпатичный монстр

+ Коллекция

Симпатичный монстр

+ Коллекция

Симпатичный монстр

+ Коллекция

+ Векторная коллекция

+ Коллекция Vector

Троттинг Хор se

+ Коллекция

Лошадь рысь

+ Коллекция

Лошадь рысь

+ Коллекция

Лошадь рысь

+ Коллекция

Лошадь рысь

+ Коллекция

Лошадь рысь

Лошадь рысь

+ Коллекция

Vector

+ Коллекция

Лошадь рысь

+ Коллекция

Лошадь рысь

+ Коллекция

Лошадь рысь

+ Коллекция

Vector

+ Коллекция

Коллекция

Коллекция

Вектор

+ Коллекция

Вектор

+ Коллекция

Вектор

+ Коллекция

Вектор

+ Коллекция

Вектор

+ Коллекция

Вектор

+ Коллекция

+ Коллекция

+ Коллекция Vect или

+ Collection

Vector

+ Collection

Vector

+ Collection

Vector

+ Collection

Vector

+ Collection

Vector

+ Collection

Vector

+ Collection

Vector

+ Collection

Vector

+ Collection

Vector

+ Collection

Vector

+ Collection

Vector

+ Collection

+ Коллекция

Heart Pokemon

+ Коллекция

Half Heart

+ Коллекция

Half Heart

+ Коллекция

Half Heart

+ Коллекция

Half Heart 9000 Heart3

+ Коллекция

+ Коллекция

+ Коллекция

бесплатных иконок в SVG и PNG

Бесплатные иконки SVG со сверхбыстрым поиском и бесплатной колой. Создан для развлечения с помощью Icons8.

Иконки Facebook

• Значок «Нравится» в Facebook
• Значок «Нравится» в Facebook
• Значок «Нравится» в Facebook
• Значок «Нравится» в Facebook
• Значок «Нравится» в Facebook
• Значок «Нравится» в Facebook
• Значок «Нравится» в Facebook
• Значок «Нравится» в Facebook
• Значок Facebook
• Значок Facebook

Значки телефона

• Значок гарнитуры
• Значок гарнитуры
• Значок гарнитуры
• Значок гарнитуры
• Значок гарнитуры
• Значок гарнитуры
• Значок гарнитуры
• Значок гарнитуры
• Значок гарнитуры
• Значок гарнитуры

Иконки YouTube

• Значок YouTube 2
• Значок YouTube 2
• Значок YouTube 2
• Значок YouTube 2
• Значок YouTube 2
• Значок YouTube 2
• Значок YouTube 2
• Значок YouTube 2
• Значок YouTube 2
• Значок YouTube 2

Иконки веб-сайтов

• Значок веб-сайта
• Значок веб-сайта
• Значок веб-сайта
• Значок веб-сайта
• Значок веб-сайта
• Значок веб-сайта
• Значок веб-сайта
• Значок веб-сайта
• Значок веб-сайта
• Значок веб-сайта

Google Иконки

• Значок веб-поиска Google
• Значок веб-поиска Google
• Значок веб-поиска Google
• Значок веб-поиска Google
• Значок веб-поиска Google
• Значок веб-поиска Google
• Значок веб-поиска Google
• Значок веб-поиска Google
• Значок веб-поиска Google
• Значок веб-поиска Google

Иконки Instagram

• Instagram старый значок
• Instagram старый значок
• Instagram старый значок
• Instagram старый значок
• Instagram старый значок
• Instagram старый значок
• Instagram старый значок
• Instagram старый значок
• Instagram старый значок
• Instagram старый значок

Значки электронной почты

• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты

Twitter Иконки

• Значок Twitter
• Значок Twitter
• Значок Twitter
• Значок Twitter
• Значок Twitter
• Значок Twitter
• Значок Twitter
• Значок Twitter
• Значок Twitter
• Значок Twitter

E Значки электронной почты

• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты
• Значок электронной почты

Значки электронной почты

• Значок почты
• Значок почты
• Значок почты
• Значок почты
• Значок почты
• Значок почты
• Значок почты
• Значок почты
• Значок почты
• Значок почты

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

доступных иконок SVG | CSS-уловки

Ответ на вопрос «Какой HTML является наиболее доступным для значка SVG?» не универсален, потому что то, что значок должен делать на веб-сайте, варьируется. Я неравнодушен к исследованиям Хизер Миглиориси по этому поводу, но могу подвести итог. Очень быстро: скройте его, если он декоративный, назовите его, если он автономный, позвольте ссылке работать, если это ссылка. Вот эти три возможности:

Икона декоративная

То есть значок просто сидит, выглядит красиво, но не имеет значения, исчез ли он полностью. В таком случае:

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

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

   .. .  

Это работает для SVG внутри , скажем, или если сам SVG играет роль «кнопки».

Значок обернут ссылкой

… а ссылка — это значимое действие. Важно, чтобы в ссылке был хороший текст. Если в ссылке есть видимый текст, значит, значок декоративный. Если SVG — это ссылка, обернутая в (а не внутренняя ссылка SVG), присвойте ей доступный ярлык, например:

… или иметь текст внутри ссылки и скрытого SVG.

---

Я считаю, что это правильно согласуется с советами не только Хизер, но и Сары, Хьюго и Флоренс.

Значок

— Ant Design

API #

Общий значок #

Свойство	Описание	Тип	По умолчанию	Версия
className	Строка className	906 className —
повернуть	Повернуть на n градусов (не работает в IE9)	число	—
spin	Повернуть значок с анимацией	boolean	false	Свойства стиля значка, например fontSize и color	CSSProperties	—
twoToneColor	Поддерживает только двухцветный значок. Укажите основной цвет	строка (шестнадцатеричный цвет)	—

У нас по-прежнему есть три разные темы для значков, имя компонента значка — это имя значка с суффиксом имени темы.

  импортировать {StarOutlined, StarFilled, StarTwoTone} из '@ ant-design / icons';



  

Настраиваемый значок #

Свойство компонент 9060 корневой компонент 9060 для корневого компонента Повернуть с ложным Значок поворота

	Описание	Тип	По умолчанию	Версия
ComponentType	—
повернуть	Повернуть градусы (не работает в IE9)	число	—
boolean анимация
style	Свойства стиля значка, такие как fontSize и color	CSSProperties	—

О значках SVG #

Мы представили значки SVG 3 в версии 9049. 9.0 , замена иконок шрифтов. Это дает следующие преимущества:

• Полное автономное использование значков, без зависимости от файла значка шрифта, размещенного в CDN (больше нет пустых квадратов во время загрузки и нет необходимости локально развертывать файлы шрифтов значков!)

• Многое повышенная точность отображения на экранах с низким разрешением

• Возможность выбора цвета значков

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

Более подробное обсуждение ссылки на значки SVG см # 10353.

⚠️ Учитывая дополнительный размер пакета, вызванный всеми значками SVG, импортированными в 3.9.0, мы предоставим новый API, который позволит разработчикам импортировать значки по мере необходимости. Вы можете отслеживать обновления №12011.

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

Свойства theme , component и twoToneColor были добавлены в 3.9.0 . Лучше всего передать свойство theme каждому компоненту .

  импортировать {MessageOutlined} из '@ ant-design / icons';

;  

Все значки будут отображаться на . Вы все еще можете установить стиль и className для размера и цвета значков.

Установить двухцветный цвет #

При использовании двухцветного значки, вы можете использовать статические методы getTwoToneColor () и setTwoToneColor (colorString) , чтобы указать основной цвет.

  импортировать {getTwoToneColor, setTwoToneColor} из '@ ant-design / icons';

setTwoToneColor ('# eb2f96');
getTwoToneColor ();  

Значок пользовательского шрифта #

Мы добавили функцию createFromIconfontCN , чтобы помочь разработчику удобно использовать собственные значки, развернутые на iconfont. cn.

Этот метод указан для iconfont.cn.

  импорт {createFromIconfontCN} из '@ ant-design / icons';

const MyIcon = createFromIconfontCN ({
  scriptUrl: '// в.alicdn.com/t/font_8d5l8fzk5b87iudi.js ', // 在 iconfont.cn 上 生成
});

ReactDOM.render (, смонтированный узел);  

Создает компонент, который по сути использует спрайты SVG.

Доступны следующие варианты:

: any}

Свойство	Описание	Тип	По умолчанию	Версия
extraCommonProps	Определить дополнительные свойства для строки компонента	{}
scriptUrl	URL-адрес, созданный с помощью iconfont.cn project. Поддержка строки [] после @ ant-design / [email protected]	строка | string []	—

Для импорта символов спрайтов SVG необходимо установить свойство scriptUrl .

См. Документы iconfont.cn, чтобы узнать, как сгенерировать scriptUrl .

Пользовательский значок SVG #

Значок SVG можно импортировать в качестве компонента реакции, используя webpack и @ svgr / webpack . @ svgr / webpack Справочник по опциям .

 
{
  тест: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  использовать: [
    {
      загрузчик: 'babel-loader',
    },
    {
      загрузчик: '@ svgr / webpack',
      опции: {
        babel: ложь,
        значок: правда,
      },
    },
  ],
}  

  импорт иконки из '@ ant-design / icons';
импортировать MessageSvg из 'path / to / message.svg';



ReactDOM.render (, mountNode);  

Для компонента доступны следующие свойства:

Свойство	Описание	Тип	Только для чтения	Версия
className	s имя класса s вычисленное имя класса	string	—
fill	Определите цвет, используемый для окраски svg элемента	string	currentColor
	высота	Высота	строка | number	1em
style	Вычисленный стиль элемента svg	CSSProperties	—
ширина элемента	Строка 906 svg	Ширина строки svg номер	1em

Как создать символы-иконки с поддержкой SVG в Sketch | автор: Ребекка Беттингер

Создавали ли вы когда-нибудь значок в Sketch, и после его экспорта один из разработчиков в вашей команде отправляет вам снимок экрана со странной, искаженной версией этого значка? Я чувствую, что многие дизайнеры борются с этим, по крайней мере, я. Я также опробовал множество способов установки значков в Sketch для разных проектов, некоторые из них заставляют меня подготавливать значки каждый раз, когда разработчикам что-то нужно.

В этой статье я хочу поделиться своим опытом и показать вам, что я считаю лучшим способом создания символов значков и библиотек. Я пришел туда, постоянно приспосабливаясь к отзывам разработчиков и изучая саму спецификацию SVG и способ работы экспорта Sketch. Эта настройка позволит вам

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

Все это возможно только с использованием Скетч с официальным плагином Sketch «Компрессор SVGO».Никаких переключений между Illustrator и Sketch, никакой дополнительной подготовки к экспорту — когда библиотека встала, вам не нужно ее трогать, кроме как по соображениям дизайна.

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

Если вы хотите узнать больше о SVG, вы можете начать с w3schools.com, у них есть отличная для начинающих документация по всем соответствующим веб-технологиям, таким как HTML, JS, CSS и SVG.

Файлы SVG отличаются от файлов растровых изображений, таких как .png или .jpg. Они описаны в тексте разметки, который можно просмотреть, открыв файлы SVG в любом текстовом редакторе. Эта разметка будет интегрирована в код, определяющий приложение, и отображена браузером. Это означает, что во время экспорта то, что мы видим в Sketch, будет переведено в текстовое представление информации о пути и стиле. Поскольку векторные инструменты Sketch дают нам немного другие варианты, чем предоставляет разметка SVG, Sketch должен пересчитывать информацию, и результат не всегда может быть правильным.

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

Следующие два примера показывают две очень распространенные проблемы, с которыми я столкнулся при экспорте SVG.

Broken Text

tabler / tabler-icons: набор из более чем 1250 бесплатных высококачественных SVG-значков, лицензированных MIT, для использования в ваших веб-проектах.

Набор из более чем 1250 бесплатных высококачественных SVG-значков с лицензией MIT, которые вы можете использовать в своих веб-проектах. Каждая иконка имеет сетку 24×24 и обводку пикселей размером пикселей.

Если вы хотите поддержать мой проект и помочь мне в его развитии, вы можете стать спонсором на GitHub или просто сделать пожертвование через PayPal :)

Поиск иконок: https: // tabler-icons. io /

Спонсоры

Предварительный просмотр

Спонсорский стол

Установка

  npm install @ tabler / icons --save
  

или просто скачайте с Github.

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

Все значки созданы с использованием SVG, поэтому вы можете разместить их как , background-image и встроить в HTML-код.

Изображение HTML

Если вы загружаете значок как изображение, вы можете изменить его размер с помощью CSS.

Встроенный HTML

Вы можете вставить содержимое файла значка в свой HTML-код, чтобы отобразить его на странице.

 
   ..
  
  Нажми на меня
 

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

 .icon-tabler {
  красный цвет;
  ширина: 32 пикселя;
  высота: 32 пикселя;
  ширина штриха: 1,25;
} 

SVG спрайт

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

Реагировать

Импортируйте значок и визуализируйте его в своем компоненте. Вы можете настроить свойства SVG с помощью React props:

 импортировать {IconAward} из '@ tabler / icons';

const MyComponent = () => {
  return 
} 

@ tabler / icons экспортирует собственные объявления типов для использования с React и Typescript.

CDN

Все файлы, входящие в пакет @ tabler / icons npm, доступны через CDN.

React иконки

Iconfont

Чтобы загрузить определенную версию, замените последней версии нужным номером версии.

Svelte

Вы можете использовать tabler-icons-svelte для использования значков в ваших проектах Svelte (см. Пример):

 <сценарий>
    импортировать {CurrencyBitcoin, BrandGithub, CircleX} из "tabler-icons-svelte";




 

Множественные удары

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