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

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

Секция 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.

<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 для групп элементов, которые будем перемещать. Также, так как обе стороны ножницы должны перемещаться вместе, создаём функцию, которую повторно используем при обращении к

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, а значит и двумя системами координат. Это делает реализацию несколько сложнее.

Набры иконок для сайта (svg, вектор)

Найдено шаблонов: 36

• Цена
• Дата
• Рейтинг

Показать еще

Наборы иконок – это готовые навигационные картинки для сайтов, созданные в одной тематике профессиональными веб-дизайнерами.

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

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

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

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

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

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

Уже знаете, что Вам нужно? Даже если и не знаете, скорей начинайте знакомиться с нашими шаблонами! Доступные цены, высокое качество и уникальный дизайн мы гарантируем!

Этот сайт использует файлы cookie. Продолжая использовать этот сайт, закрывая этот баннер или нажав «Я согласен», вы соглашаетесь c Политикой конфиденциальности.

Я согласен

Скачать бесплатные иконки для веб-дизайна

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

SVG

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

Использование значков SVG · Веб-разработка 3 · Изучение Интернета

Мы рассмотрим создание листа спрайтов SVG с некоторыми значками внутри. Затем мы будем использовать значки на веб-сайте в простом макете.

Вот как это должно выглядеть, когда это будет сделано:

1. Напечатайте, напечатайте очень хорошо

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

Начните урок с разветвления и клонирования репозитория с использованием svg-icons .

Разветвить и клонировать репозиторий «using-svg-icons».

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

1. Форк, клон и Markbot

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

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

Загрузите файлы «using-svg-icons».

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

1. Загрузки

   Загрузка будет включать в себя такие вещи, как изображения, PSD, AI и т. д., которые нам нужны для урока, которые слишком велики для Git и GitHub.

После подворока, клонирования и загрузки мы должны иметь структуру папки, такая как это:

1. с использованием SVG-ICONS-ILSLENON 9000 2 .

   dino-icons.ai

2. using-svg-icons0177

   css

3. main.css

4. modules.css

5. images

1. Make an index.html & add the boilerplate code.
2. Создайте main.css в папке css — она может оставаться пустой.
3. Создайте modules.css в папке css — получите новую версию от Modulifier. Обязательно нажмите «Выбрать все».
4. Создайте папку изображений .

1. Соглашения об именах

   Не забывайте соблюдать соглашения об именах.

2. HTML snippets

   Create the boilerplate with html5 , viewport , css

 Файл > Экспорт > Экспорт для экранов…
 

 ⋮

<тело>
  <ул>
    

      <а href="#">
        <я>
           svg#brachiosaurus">
        
        Брахиозавр