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

Содержание

Редактируемая система SVG-иконок | Vue.js

Простой пример

Есть множество способов создания системы SVG-иконок (SVG Icon System), но один из способов, который использует возможности Vue — создание редактируемых встроенных иконок в виде компонентов. Некоторые преимущества подобного подхода:

Их легко редактировать «на лету»
Они анимируются
Можно использовать обычные входные параметры, со значениями по умолчанию, для сохранения стандартного размера или изменения по необходимости
Они встраиваемые, поэтому HTTP-запросы не требуются
Они могут быть доступны динамически

Создадим сначала каталог для всех иконок и назовём каждую в едином стиле, чтобы облегчить их поиск:

components/icons/IconBox.vue
components/icons/IconCalendar.vue
components/icons/IconEnvelope.vue

Вот репозиторий с примером для начала работы, где можно увидеть готовую настройку: https://github. com/sdras/vue-sample-svg-icons/ (opens new window)

Теперь создадим компонент базовой иконки (IconBase.vue), который использует слот:

<template>
  <svg xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    viewBox="0 0 18 18"
    :aria-labelledby="iconName"
    role="presentation"
  >
    <title
      :id="iconName"
      lang="en"
    >
      {{ iconName }} icon
    </title>
    <g :fill="iconColor">
      <slot />
    </g>
  </svg>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Можно использовать эту базовую иконку «как есть», но необходимо обновлять

viewBox в зависимости от viewBox показываемой иконки. В базовом компоненте определяем входными параметрами width, height, iconColor и имя иконки, чтобы динамически их обновлять.

Имя используем для содержимого <title> и для id для лучшей доступности.

Секция script станет выглядеть следующим образом: некоторые значения останутся по умолчанию, поэтому иконка будет отрисовываться всегда одинаково, пока не изменим её:

export default {
  props: {
    iconName: {
      type: String,
      default: 'box'
    },
    width: {
      type: [Number, String],
      default: 18
    },
    height: {
      type: [Number, String],
      default: 18
    },
    iconColor: {
      type: String,
      default: 'currentColor'
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Заданное по умолчанию свойство currentColor используется для цвета иконки и заставит её наследовать цвет текста. Но можно передать и другой цвет входным параметром, если захотим.

Компонент можно использовать следующим образом, передавая в слот единственным содержимым IconWrite.

vue, содержащим пути внутри иконок:

<icon-base icon-name="write">
  <icon-write />
</icon-base>

1
2
3

Теперь если потребуется несколько иконок с разными размерами — всё очень просто:

<p>
  <!-- можно передавать меньшую `width` и `height` -->
  <icon-base
   
   
    icon-name="write"
  >
    <icon-write />
  </icon-base>
  <!-- или использовать значение по умолчанию, равное 18 -->
  <icon-base icon-name="write"><icon-write /></icon-base>
  <!-- или сделать её немного больше :) -->
  <icon-base
   
   
    icon-name="write"
  >
    <icon-write />
  </icon-base>
</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Анимируемые иконки

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

<template>
  <svg
    @click="startScissors"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
   
   
    aria-labelledby="scissors"
    role="presentation"
  >
    <title
     
      lang="en"
    >
      Анимированная иконка с ножницами
    </title>
    <path
     
      fill="#fff"
      d="M0 0h200v100H0z"
    />
    <g ref="leftscissor">
      <path d="M..."/>
      ...
    </g>
    <g ref="rightscissor">
      <path d="M..."/>
      ...
    </g>
  </svg>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { TweenMax, Sine } from 'gsap'
export default {
  methods: {
    startScissors() {
      this.  scissorAnim(this.$refs.rightscissor, 30)
      this.scissorAnim(this.$refs.leftscissor, -30)
    },
    scissorAnim(el, rot) {
      TweenMax.to(el, 0.25, {
        rotation: rot,
        repeat: 3,
        yoyo: true,
        svgOrigin: '50 45',
        ease: Sine.easeInOut
      })
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Используем refs для групп элементов, которые будем перемещать. Также, так как обе стороны ножницы должны перемещаться вместе, создаём функцию, которую повторно используем при обращении к

refs. Использование библиотеки GreenSock помогает разрешить поддержку анимации и проблемы с transform-origin во всех браузерах.

See the Pen Editable SVG Icon System: Animated icon by Vue (@Vue) on CodePen.

Довольно легко сделано! И легко обновлять «на лету».

Больше анимационных примеров можно посмотреть в репозитории (opens new window)

Дополнительные замечания

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

Когда не следует этого делать

Подобная система SVG-иконок действительно полезна, когда есть несколько иконок, которые используются по-разному на всём сайте. Но если дублируете одну и ту же иконку много раз на одной странице (например иконку удаления во всех строках гигантской таблицы), может имеет больше смысла сделать спрайты, скомпилированные в лист, а затем использовать теги <use> для их загрузки.

Альтернативные варианты

Другие инструменты для помощи в управлении SVG-иконками включают:

svg-sprite-loader (opens new window)
svgo-loader (opens new window)

Эти инструменты собирают SVG-иконки на этапе компиляции, что добавляет сложности для редактирования во время выполнения, потому что теги <use> могут иметь странные баги с кроссбраузерностью при выполнении чего-то сложного. Они также оставляют с двумя вложенными свойствами viewBox, а значит и двумя системами координат. Это делает реализацию несколько сложнее.

Лучшие бесплатные коллекции векторных иконок / Хабр

Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.

Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face, SVG, EPS, AI, PSD, Sketch.

В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.

Responsive Icons (100 иконок, PSD, AI, EPS, SVG)

Icon-Works (130+ иконок, Webfont)

Feather (130 иконок, PSD, SVG, Webfont)

Linea (730+ иконок, SVG, Webfont)

Icony (100 иконок, SVG, PSD)

Free iOS Icons Pack (100 иконок, PSD, Webfont)

Touch Icons (340 иконок, PSD, AI, SVG)

Simple Line Icons (100 иконок, AI, EPS, SVG, PSD)

Themify Icons (320+ иконок, SVG и Webfont)

Elegant Line-Style Icons (100 иконок, AI, SVG)

Pixeden Icon Font Pack (170 иконок, Webfont)

Summer and Essentials Icon Set (50 иконок, EPS, AI, PNG)

Webicons (100 иконок, AI, EPS)

Stroke Icons (80 иконок, PSD, AI, Webfont)

Microns (231 иконок, SVG, Webfont)

Outlined Icons (150 иконок, PSD, SVG, AI, Webfont)

LineIconSet v1.

0 (200 иконок, EPS)

Someicons (153 иконок, EPS, SVG)

Universal Icons (100 иконок, SVG)

Flat Color Icons (300+ иконок, SVG)

Iconia (100+ иконок, Webfont)

Typicons (336 иконок, SVG, Webfont)

Geoph (80 иконок, AI, PSD)

Evil Icons (70 иконок, SVG)

Stroke Gap Icons (200 иконок, AI, PSD, SVG, Webfont)

Unigrid (100 иконок, AI)

Amenities (100 иконок, EPS, PSD)

Elegant Icons (360 иконок, Webfont)

Lightwing (60 иконок, Webfont)

Tonicons (500 иконок, EPS, Sketch, Webfont)

Epic Icons (1000+ иконок, Webfont)

Lynny Icons (900+ иконок, EPS, AI)

Helium (100 иконок, AI, EPS, SVG, Webfont)

Essential Icons (77 иконок, EPS, PSD, AI, SVG)

Dripicons (95 иконок, Webfont)

Cinema (200 иконок, SVG)

Open Iconic (200+ иконок, SVG, Webfont)

Twig (100+ иконок, SVG, Webfont)

MFG Labs Iconset (160+ иконок, Webfont)

PrestaShop Icons (300+ иконок, EPS, Webfont)

Subway (300+ иконок, Webfont)

Entypo (400+ иконок, Webfont)

Fundation Icons (100+ иконок, Webfont)

Ionic Icons (~750 иконок, Webfont)

Material Icons (~1000 иконок, SVG, Webfontg)

Font Awesome (1000+ иконок, Webfont)

Squid

Solid, Flat and Line Icons (150 иконок, EPS, AI, PSD, SVG)

Roundicons (60 иконок, PNG, SVG, EPS, PSD, AI)

Retinaicons (200 иконок, AI)

Swifticons (92*3 иконок, EPS, AI, PSD, Sketch SVG)

Ballicons 2 (36 иконок, PNG, SVG, PSD)

Больше спасибо всем за внимание.

бесплатных значков 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 или Яблочное сафари.

10 лучших сайтов для загрузки бесплатных иконок SVG

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

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

К счастью, существует множество различных сайтов, которые упрощают поиск бесплатных SVG-иконок. Вот 10 лучших.

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

Все векторы и значки SVG Repo полностью лицензированы по открытой лицензии, что означает, что вы можете использовать их даже в коммерческих проектах без каких-либо лицензионных отчислений или аккредитации.

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

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

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

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

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

При создании веб-сайта или службы с использованием Bootstrap значки Bootstrap позволяют легко устанавливать их значки непосредственно в ваш проект через npm или Composer. Это может быть невероятно удобно для определенных проектов.

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

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

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

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

С Reshot все, что вам нужно сделать, это найти то, что вы ищете. Вы можете различать значки и пакеты значков, когда вы это делаете, и если вы не можете найти то, что ищете, Reshot также предложит другие поисковые запросы, которые могут дать вам результаты, которые вы ищете.

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

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

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

Если иконки Remix Icon для вас слишком нейтральны, вы всегда можете попробовать вместо них Heroicons. Аналогичным образом, Heroicons представляет собой набор иконок, выполненный в едином стиле. В Heroicons доступно около 300 различных иконок, что довольно много, если учесть, что вы можете получить их в виде контуров, сплошных и мини-вариантов.

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

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

У Boxicons есть из чего выбирать: от логотипов и стандартных кнопок интерфейса до более абстрактных форм и символов. Если вы искали лучшие пакеты значков для Windows 10, это потенциально может попасть в список.

Это означает, что независимо от того, что вы хотите создать, вы сможете найти для этого подходящий значок.

Если вы ищете что-то, что является феноменальной библиотекой по умолчанию, Iconoir — отличное место для начала поиска.