Варианты установки svg иконки

Iconset — must have.

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

️ Скачать органайзер иконок: https://iconset.io

Лучший органайзер иконок для Mac и Windows

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

Упорядочивайте иконки и ищите их в одном месте

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

Используйте Iconset с любым дизайнерским приложением

Перетаскивайте иконки из Iconset прямо в свой любимый инструмент! Этот универсальный органайзер для иконок больше не требует установки плагинов или расширений.

Синхронизируйте значки на разных устройствах в реальном времени

Iconset поддерживает любые облачные сервисы, такие как Dropbox, OneDrive или Box, для включения иконок, которыми вы делитесь с вашей командой.

Не волнуйтесь, здесь нет ежемесячной подписки.

Публикуйте и делитесь своими наборами значков или пакетами значков

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

Организация иконок

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

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

Рекомендую хорошее и бесплатное приложение для Mac и Windows, которое позволяет добавлять бесплатные библиотеки в приложение и удобно работать с ними. Можно просматривать сразу иконки, использовать поиск, настраивать иконки, экспортировать в разных форматах.

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

Иконки Bootstrap — это SVG, поэтому вы можете включить их в свой HTML несколькими способами в зависимости от того, как настроен ваш проект. Иконки Bootstrap включают в себя и в по умолчанию для обеспечения легкого изменения размера с помощью .

Внедрение

Встраивайте свои иконки в HTML-код вашей страницы (в отличие от внешнего файла изображений). Здесь мы использовали пользовательскую и .

Спрайт

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

Скопируйте SVG-иконки Bootstrap в выбранный вами каталог и назовите их как обычные изображения с помощью элемента .

CSS

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

Атрибут необходим, если вы хотите изменить размер значков с использованием

Обратите внимание, что атрибут является обязательным

Работа с SVG

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

• Обработка фокуса нарушена в Internet Explorer и Edge. При встраивании ваших SVG добавьте к элементу . Узнайте больше на Stack Overflow

• Браузеры непоследовательно объявляют SVG как теги с помощью голосовой поддержки. Добавьте чтобы избежать проблем.

• Safari пропускает при использовании не сфокусированных SVG. Поэтому, используйте при встраивании файла и используйте CSS для визуального скрытия эквивалентной метки.

Отображение иконок в браузерах без поддержки SVG

В данный момент самый удобный и надежный способ вставки — в виде спрайта.

Для замены картинок в IE8 и старше можно использовать способ с множественными фонами:

Для старых Опер можно использовать такой селектор:

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

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

UPD: Большое спасибо Роме Комарову за дополненния к тексту.

UPD от 04.04.14:

1. Дополнение от Сережи Борончиева: SVG в data URI будет работать везде, если заэскейпить строку, например, с помощью (JS).
2. Прекрасный пост от Lеа Verou: Dynamically generated SVG through SASS + A 3D animated RGB cube!. Она предлагает использовать SASS, чтобы автоматически генерировать SVG-градиенты для использования в data URI.

Просмотр и загрузка значков премиум-класса в формате файла SVG

Набор иконок 10000 бизнес

от 10point5star

11 Продаж

17 $

+10000 Набор иконок для бизнеса

от 10point5star

5 Продаж

15 $

3000+ набор иконок символов

от SmashingStocks

3 Продаж

24 $

Бекрис — набор иконок премиум-класса

от Becris

820 Продаж

39 $

13000+ шаблонов Mega Big Bundle Iconset

от 10point5star

2 Продаж

18 $

Заполненный шаблон бизнес-иконки

от 10point5star

2 Продаж

15 $

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

от AbdullahNoman

1 Продаж

5 $

140+ Набор шаблонов Medical Iconset

от Vectorslab

1 Продаж

Набор веб-иконок 50 линий

от 10point5star

1 Продаж

9 $

Набор из 25 значков синего тона вируса короны премиум-класса

от kazim

1 Продаж

Отель Glyph Icon Set

от Bundlester

1 Продаж

7 $

Медицинские 100 набор иконок пакет

от StringLabs

15 Продаж

15 $

48 набор иконок перевернутых символов электронной торговли

от IconBunny

13 Продаж

13 $

Круглость — набор иконок линии круга

от ZackFairDesign

7 Продаж

39 $

Цифровое устройство и технология значок набор

от AbdullahNoman

1 Продаж

5 $

Фигурку Набор иконок для шаблона значков йоги

от KhushiGraphics

1 Продаж

5 $

Пакет значков флагов в стиле милый клипарт

от Icons8

1 Продаж

5 $

Значок набора активности мозга

от barsrsind

2 Продаж

8 $

Набор иконок 125 цифровой безопасности

от 10point5star

1 Продаж

9 $

70 современных иконок безопасности

от 10point5star

1 Продаж

9 $

Набор из 50 зеленых и черных значков линии делового администрирования

от IconBunny

24 Продаж

13 $

Набор из 50 плоских многоцветных значков ИТ и коммуникаций

от IconBunny

3 Продаж

13 $

Набор из 50 синих и черных иконок Закон и порядок

от IconBunny

3 Продаж

13 $

Набор иконок из 50 медицинских символов

от IconBunny

17 Продаж

13 $

Векторные иконки линии и набор шрифтов

от cassandracappello

3 Продаж

17 $

100 страховых иконок — набор серии ColorLine

от FlatIcons

2 Продаж

15 $

100 иконок онлайн-образования — набор серии ColorPop

от FlatIcons

6 Продаж

15 $

417 символов в 12 различных категорияхНабор иконок

от GraphicNehar

1 Продаж

17 $

60 ветеринарных иконок — набор кинетических серий

от FlatIcons

3 Продаж

15 $

73 Строительные иконы — набор серии Butterscotch

от FlatIcons

4 Продаж

15 $

80 иконок транспорта — набор серии ColorPop

от FlatIcons

3 Продаж

15 $

85 Men _ Women Health Icons — набор кинетических серий

от FlatIcons

3 Продаж

15 $

90 бизнес-иконок — набор ярких серий

от FlatIcons

1 Продаж

15 $

91 Fintech Иконка — Набор из серии Orchid

от FlatIcons

1 Продаж

15 $

96 туристических иконок — набор серии Hazel

от FlatIcons

2 Продаж

15 $

Всего 100 значков запуска — 25 видов значков с 4 стилями

от icondoit

Установка в HTML

Можно вставить SVG графику непосредственно в нужное место HTML кода:

<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>
<path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/>
<line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/>
<line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/>
<circle cx=»12″ cy=»12″ r=»10″/>
</svg>

1 2 3 4 5 6

<svg width=»128″height=»128″role=»img»xmlns=»http://www.w3.org/2000/svg»viewBox=»0 0 24 24″stroke=»#337AB7″stroke-width=»2″stroke-linecap=»square»stroke-linejoin=»miter»fill=»none»color=»#337AB7″> <path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> <line stroke-linecap=»round»x1=»9″y1=»9″x2=»9″y2=»9″/> <line stroke-linecap=»round»x1=»15″y1=»9″x2=»15″y2=»9″/> <circle cx=»12″cy=»12″r=»10″/> </svg>

Вариант хороший, но только для одной картинки. Если картинок много, у нас получится масса одинакового кода.

Установка через JS

Создаем переменную с кодом нашей иконки и используем его на нужном нам элементе

let icon = ‘<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>\
<path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> \
<line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/> \
<line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/> \
<circle cx=»12″ cy=»12″ r=»10″/> \
</svg>’; // наша иконка
let svgimg = document.querySelectorAll(«.happyface»); // находим все элементы с классом happyface
for( let i = 0; i < svgimg.length; i++){ // проходим циклом по всем элементам
svgimg.innerHTML = icon; // вставляем в них иконку
}

1 2 3 4 5 6 7 8 9 10

let icon='<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>\     <path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> \ <line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/> \ <line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/> \ <circle cx=»12″ cy=»12″ r=»10″/> \ </svg>’;// наша иконка let svgimg=document.querySelectorAll(«.happyface»);// находим все элементы с классом happyface for(leti=;i<svgimg.length;i++){// проходим циклом по всем элементам svgimgi.innerHTML=icon;// вставляем в них иконку }

И далее, как в варианте с CSS, вставляем нужную нам иконку куда угодно и сколько угодно раз.

<div class=»happyface»></div>

1	<div class=»happyface»></div>

На jQuery код получается проще:

let icon = ‘…’; // наша иконка
$(«.happyface»).html(icon); // вставляем иконку в элемент с классом happyface

1 2	let icon=’…’;// наша иконка $(«.happyface»).html(icon);// вставляем иконку в элемент с классом happyface

Наборы готовых иконок

iconmelon.com

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

Upd. от 4.07.2020: к сожалению, сайт давно не работает.

От автора проекта есть вдохновляющая статья про SVG-иконки, анимации и эффекты: SVG icons FTW.

Удобнейший инструмент. Можно не только выбрать и скачать готовые иконки, но также можно загрузить свои и получить их в виде шрифта и/или спрайта. Вместе со спрайтом предлагается загрузить его PNG-версию.

flaticon.com

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

Спрайт или иконочный шрифт?

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

С помощью шрифта можно делать не только однотонные иконки, но и разноцветные.

Свой шрифт можно сделать, например, на сайте icomoon.io/app/. Примерная последовательность действий:

1. Выберите иконки из набора и/или загрузите свои.
2. Кликните внизу кнопку Font.
3. На этом шаге можно переназначить символы для иконок или сразу загрузить получившийся шрифт.

Вместе со шрифтом в четырех форматах (.woff, .svg, .ttf, .eot) загружается CSS и демо-файл.

Встраиваемые шрифты работают даже в 8-м IE, но при этом имеют неожиданные проблемы с поддержкой в некоторых современных браузерах.
Opera Mini вообще не поддерживает кастомные шрифты, Firefox’у требуются заклинания для сервера, где лежит шрифт (решается с помощью base64), Chrome может выгрузить шрифт, если вы надолго оставили вкладку открытой:

также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии, а в некоторых других браузерах вместо иконок может оказаться всё что угодно, например, эмоджи (проблема была описана в статье Криса Коэра Icon System with SVG Sprites).

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

Ещё одна статья в поддержку SVG: Ten reasons we switched from an icon font to SVG.

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

Хочется надеятся, чтоб в будущем встраиваемые шрифты будут лучше поддерживаться.

Как существуют способы вставки SVG на страницу?