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

Использование SVG иконок с помощью Angular Material | by Aleksandr Serenko | F.A.F.N.U.R

В данной статье приведу несколько решений как можно использовать Angular Material для вывода пользовательских иконок в SVG.

В документации Angular Material есть часть, которая связана с иконками — SVG icons.

Основная идея вывода иконок с помощью Material заключается в встраивании svg напрямую в документ, что позволяет стилизовать иконки с помощью CSS.

Есть два способа создания иконки:

• Первый способ это использовать путь до SVG иконки. Это решение будет аналогично работе тега img. MatIconRegistry будет загружать иконку по http и вставлять содержимое в HTML, где используется иконка.
• Второй способ это использовать содержимое SVG и создавать иконку без дополнительных http запросов. Для этого просто создаются константы, значение которых и будет содержимое SVG.

Пример создания SVG иконки, указав путь до иконки:

Пример создания SVG иконки, используя содержимое иконки:

Для того чтобы не импортировать MatIconRegistry и DomSanitizer каждый раз, создадим простенький сервис — IconService:

В сервисе реализовано два метода:

• add — создание иконки из содержимого SVG, где первый аргумент это имя иконки, второй аргумент это содержимое SVG.
• addPath — создание иконки с использованием пути до иконки, где первый аргумент это имя иконки, второй аргумент это путь до SVG иконки.

Отмечу, что в Angular вы можете использовать пути иконок, которые расположены в assets. Однако путь до них нужно указывать начиная с assets, также как это делается при использовании картинок в HTML или CSS в Angular:

/assets/icons/telegram.svg

Сравнение решений

У каждого из решений есть свои плюсы и минусы.

Использование путей до иконок.

плюсы:

• Не увеличивает исходную сборку проекта

минусы:

• На каждую созданную иконку будет сделан HTTP запрос.
• При использовании SSR могут быть проблемы при сборке проекта, так как нужно особым образом обрабатывать запросы по загрузке иконок. Проблема проявляется при использовании пререндера.
• При медленном интернете иконки могут быть не загружены и пользователь, который получит страницу, может увидеть нежелательные сайд эффекты.

демо:

Использование содержимого SVG.

плюсы:

• Не создает дополнительных запросов к серверу
• Нет проблем с SSR
• Нет проблем с отображением при медленном интернете

минусы:

• Существенно увеличивает сборку проекта, так как все исходники SVG будут храниться в билде.

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

демо:

Резюме

В статье разобраны примеры создания пользовательских иконок SVG c помощью Angular Material. Приведено два решения: создание иконок с использованием путей до иконок, а также создание иконок из содержимого SVG. В конце статьи разобраны плюсы и минусы каждого из приведенных решений.

Ссылки

Все исходники находятся на github, в репозитории:

GitHub — Fafnur/angular-samples: Samples of using different solutions in Angular

Samples of using different solutions in Angular.

github.com

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — icons.

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln

html — SVG-спрайты. Не все иконки грузятся

Вопрос задан 4 года 4 месяца назад

Изменён 4 года 4 месяца назад

Просмотрен 906 раз

Использую на сайте svg-спрайты. Иконок достаточно много (около 100), и с отображением 99% иконок нет никаких проблем. Но некоторые не подгружаются, или подгружаются на одной странице, а на другой — нет.
В консоли выводит ошибку 500 (Internal Server Error) (именно на подгрузку спрайта).
Есть предположения с чем это может быть связано?

Приведу пример конструкции svg-спрайта:

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs> 
       <symbol viewBox="0 0 56 64">
          ...
       </symbol>
   </defs>
</svg>

Вставляю в html по айдишнику:

<svg>
   <use xlink:href="images/svgdefs.svg#icon-apple"></use>
</svg>

Код неподгружаемой иконки (сгенерен через icomoon.io):

<symbol viewBox="0 0 40 40">
    <path d="M6.66 16l13.34 8 20-12-20-12-20 12h30v4h-13.34zM0 16v16l4-4.44v-9.16l-4-2.4zM20 40l-14-8.4v-12l14 8.4 14-8.4v12l-14 8.4z"></path>
</symbol>

• html
• css
• вёрстка
• svg
• svg-спрайт

2

Вот здесь подробно разбиралась тема добавления иконок из спрайта.

Update

Данная конструкция файла спрайта — избыточна

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs> 
       <symbol viewBox="0 0 56 64">
          ...
       </symbol>
   </defs>
</svg>

Секция <defs> ... </defs> выполняет в svg роль библиотечного хранилища.

В этот раздел обычно помещают готовые фрагменты кода, которые могут быть использованы многократно и пока фрагмент кода не вызван с помощью команды
<use xlink:href=#.. ></use>

он не виден и не участвует в ходе выполнения программы.

Теги <symbol> ... </symbol> выполняют ту же роль, что и <defs> — скрывают фрагмент кода до вызова командой <use>

Главное отличие <defs> от <symbol> — в возможности у тега символа использовать дополнительный viewBox, который дает возможность дополнительного масштабирования и позиционирования элементов SVG.

У CHRIS COYIER есть прекрасная статья на эту тему.

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

бесплатных значков SVG, мгновенная загрузка [без указания авторства]

бесплатных значков SVG, мгновенная загрузка [без указания авторства] | Переснять

search—form#filterChange» data-type=»icons»> Иконки search—form#filterChange» data-type=»illustrations»> Иллюстрации

Введите

search—form#filterChange» data-type=»no»> Иконки search—form#filterChange» data-type=»yes»> Наборы иконок

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

Хотите создать что-то действительно культовое? В библиотеке иконок Reshot есть все необходимое. Мгновенно добавляйте акценты своим проектам благодаря мгновенной загрузке значков и отсутствию указания авторства, чтобы замедлить процесс.

Библиотека с иконками

Нужны ли вам иконки для бизнеса, еды, образования, людей или чего-либо еще под солнцем — у Reshot есть все для вас. Дайте нам шанс!

Бизнес Социальные медиа Медицинский Недвижимость Образование Деньги Еда Строительство Стрелка Расположение Люди

Часто задаваемые вопросы

Какая лицензия на иконки Reshot?

По лицензии Reshot Icons Free License любые иконки Reshot можно использовать в любых коммерческих и некоммерческих проектах — бесплатно.

Просто так.

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

Нужно ли атрибутировать?

Вы совершенно не обязаны отдавать нам должное, но мы никогда не откажемся от крика! Распространите любовь, разместив ссылку на наш веб-сайт, или отметьте нас в нашем Instagram @reshot_hq, и мы можем просто поделиться!

Как скачать бесплатные иконки?

Просто найдите понравившийся значок, наведите на него курсор и нажмите «Загрузить». Тогда он твой!

Могу ли я редактировать иконки?

Определенно! Не стесняйтесь изменять значки Reshot, чтобы сделать их своими. Просто скопируйте прямо в Figma (или предпочитаемое вами программное обеспечение для дизайна) и настройте в соответствии с вашим настроением.

Можно ли использовать эти иконки бесплатно?

Ещё бы! Все наши значки можно использовать бесплатно — никаких условий.

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

Откуда все эти значки?

Прямо из головы талантливых дизайнеров! Все бесплатные иконки svg на Reshot созданы настоящими дизайнерами, отдельными авторами и партнерами брендов.

Наш сайт отличный, за исключением того, что мы не поддерживаем ваш браузер. Мы рекомендуем использовать последнюю версию Гугл Хром, Мозилла Фаерфокс, Microsoft Edge или Яблочное сафари.

svg-icons · Темы GitHub · GitHub

Здесь 727 публичных репозиториев соответствует этой теме…

ФортПотрясающе / Шрифт-потрясающий

Звезда 70,4к

простые иконки / простые иконки

Звезда 14,4к

слабый / SuperTinyIcons

Спонсор Звезда 13,7к

столик / табличные иконки

Звезда 13,1к

астрит / css.

gg Спонсор Звезда 8,8к

иконки реакции / иконки реакции

Звезда 8,8к

альра / браузер-логотипы

Звезда 5,7к

злые иконки / злые иконки

Звезда 5к

Данкламмер / значки размера байта

Звезда 3,7к

миукимиу / реагировать-кавайи

Звезда 2,8к

lucide-значки / ясный

Звезда 2,8к

Spothq / криптовалюта-иконки

Звезда 2,3к

Атисауд / значки

Звезда 2,1к

коруи / coreui-иконки

Звезда 1,9к

вебкул / яркий

Звезда 1,8к

Иконскаут / юниконы

Звезда 1,2к

вкарампинис / удивительные иконки

Звезда 1к

Леунгвенсен / svg-значок

Звезда 979

антонрешетов / vue-unicons

Звезда 966

монокомпания / моноиконки

Звезда 964

Улучшить эту страницу

Добавьте описание, изображение и ссылки на svg-иконки страницу темы, чтобы разработчикам было легче узнать о ней.