Редактируемая система SVG-иконок | Vue.js
Простой пример
Есть множество способов создания системы SVG-иконок (SVG Icon System), но один из способов, который использует возможности Vue — создание редактируемых встроенных иконок в виде компонентов. Некоторые преимущества подобного подхода:
- Их легко редактировать «на лету»
- Они анимируются
- Можно использовать обычные входные параметры, со значениями по умолчанию, для сохранения стандартного размера или изменения по необходимости
- Они встраиваемые, поэтому HTTP-запросы не требуются
- Они могут быть доступны динамически
Создадим сначала каталог для всех иконок и назовём каждую в едином стиле, чтобы облегчить их поиск:
components/icons/IconBox.vuecomponents/icons/IconCalendar.vuecomponents/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 показываемой иконки. В базовом компоненте определяем входными параметрами 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., содержащим пути внутри иконок:
<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 для групп элементов, которые будем перемещать. Также, так как обе стороны ножницы должны перемещаться вместе, создаём функцию, которую повторно используем при обращении к transform-origin во всех браузерах.
See the Pen Editable SVG Icon System: Animated icon
by Vue (@Vue)
on CodePen.
Довольно легко сделано! И легко обновлять «на лету».
Дополнительные замечания
Дизайнеры могут поменять своё мнение, требования к продукту измениться. Сохранение всей логики системы иконок в одном базовом компоненте обеспечит возможность быстрого обновления всех иконок по всему приложению. Даже при использовании загрузчика для иконок, некоторые ситуации могут потребовать пересоздания или редактирования каждой SVG-иконки при глобальных изменениях. Этот метод поможет сэкономить время и уменьшить боль.
Когда не следует этого делать
Подобная система SVG-иконок действительно полезна, когда есть несколько иконок, которые используются по-разному на всём сайте. Но если дублируете одну и ту же иконку много раз на одной странице (например иконку удаления во всех строках гигантской таблицы), может имеет больше смысла сделать спрайты, скомпилированные в лист, а затем использовать теги <use> для их загрузки.
Альтернативные варианты
Другие инструменты для помощи в управлении SVG-иконками включают:
- svg-sprite-loader (opens new window)
- svgo-loader (opens new window)
Эти инструменты собирают SVG-иконки на этапе компиляции, что добавляет сложности для редактирования во время выполнения, потому что теги <use> могут иметь странные баги с кроссбраузерностью при выполнении чего-то сложного. Они также оставляют с двумя вложенными свойствами viewBox, а значит и двумя системами координат. Это делает реализацию несколько сложнее.
Каталог — Золотой Телец
Каталог — Золотой Телец- Главная
- Каталог
- Иконки
org/ListItem»>Подвески, кулоны, крестыФильтр
По наименованию (А-Я)По наименованию (Я-А)По популярности (возрастание)По популярности (убывание) По популярности (убывание)По наименованию (А-Я)
По наименованию (Я-А)
По популярности (возрастание)
По популярности (убывание)
ЛП-99
Арт. ЛП-99ЛП-98
Арт. ЛП-98ЛП-97
Арт. ЛП-97ЛП-96
Арт. ЛП-96ЛП-95
Арт.
ЛП-95ЛП-94
Арт. ЛП-94ЛП-93
Арт. ЛП-93ЛП-92
Арт. ЛП-92ЛП-91
Арт. ЛП-91ЛП-90
Арт. ЛП-90ЛП-9
Арт. ЛП-9
ЛП-89ЛП-88
Арт. ЛП-88ЛП-87
Арт. ЛП-87ЛП-86
Арт. ЛП-86ЛП-85
Арт. ЛП-85ЛП-84
Арт. ЛП-84ЛП-83
Арт. ЛП-83ЛП-82
Арт.
ЛП-82ЛП-81
Арт. ЛП-81ЛП-80
Арт. ЛП-80ЛП-8
Арт. ЛП-8ЛП-79
Арт. ЛП-79ЛП-78
Арт. ЛП-780
Ваша корзина пуста
Исправить это просто: выберите в каталоге интересующий товар и нажмите кнопку «В корзину»
В каталог
Заказать звонок Написать сообщение Оставить отзыв значок каталога, значок папки, угол, прямоугольник, оранжевый png
PNG tags
- угол, png
- прямоугольник,
- оранжевый,
- материал,
- папок,
- папок с файлами,
- файловый менеджер,
- квадрат,
- облачное хранилище,
- продукт Дизайн,
- компьютерные иконки,
- бесплатно,
- шрифт,
- скачать С прозрачным фоном,
- желтый,
- Справочник,
- Значок,
- Папка,
- PNG изображение,
- png,
- прозрачный,
- скачать бесплатно
Информация PNG
- Размеры
- 512x512px
- Размер файла
- 18 КБ
- Тип MIME
- Изображение/png
Изменение размера онлайн png
ширина (пкс) высота (пкс)Лицензия
Некоммерческое использование, DMCA Свяжитесь с нами
org/ImageGallery» align=»middle»>
org/ImageObject»> иллюстрация пузыря, капля воды, дождь, капли, угол, белый, текст png
2000x2000px
837,81 КБ
org/ImageObject»> 0 Номер, номер 0, Форматы файлов изображений, оранжевый, цифровое изображение png
720x720px
81,82 КБ
org/ImageObject»> золотая рамка номер 2, форматы файлов Компьютерный файл, номер 2, текст, оранжевый, номер png
640x640px
59,5 КБ
org/ImageObject»> Номер, Номер 6, Форматы файлов изображений, оранжевый, номер png
1280x1280px
277,99 КБ
org/ImageObject»> Каталог Компьютерный файл, Папка, угол, Форматы файлов изображений, прямоугольник png
2000x1628px
375,6 КБ
org/ImageObject»> рамка с золотым узором, золотая и коричневая цветочная рамка, рамка, золотая рамка, прямоугольник png
885x1322px
91,69 КБ
org/ImageObject»> иллюстрация рваной коричневой бумаги, бумажный пергамент Scape house Луккое, лист бумаги, материал, папки с файлами, свиток png
2262x3200px
8,97 МБ
org/ImageObject»> золотой цвет 5, номер, номер 5, Форматы файлов изображений, текст, товарный знак png
1280x1280px
246,84 КБ
org/ImageObject»> Золото, золотой фон текстуры волнистые линии материала, угол, коричневый, золотая рамка png
800x800px
102,28 КБиконок — Ресурсный центр Directory Opus
Иконки — Ресурсный центр каталога OpusЗагрузка
Ресурсный центр Directory Opus| Тема | просмотров | Деятельность | |
|---|---|---|---|
| О категории значков | 4649 | 20 ноября 2005 г. | |
| Технические характеристики набора иконок Directory Opus | 10925 | 21 августа 2020 г. | |
| Аудио иконки | 1036 | 18 июня 2023 г. | |
| Справочник Opus 12 Flat AEicon Set v1.0 | 6725 | 18 июня 2023 г. | |
| Химмельбла v1.1 | Набор значков для темной темы (теперь включает 450 значков) | 550 | 13 мая 2023 г. | |
| Иконки Opus Dark Dock | 10593 | 21 апреля 2023 г. | |
| Набор иконок Windows 11 | 750 | 15 марта 2023 г. | |
Каталог Opus Metro Icons v2. 1 — 500 новых иконок для панели инструментов! | 13280 | 18 декабря 2022 г. | |
| Иконки букв жесткого диска | 9156 | 16 декабря 2022 г. | |
| Иконки линий и красочная версия | 10294 | 7 декабря 2022 г. | |
| Набор иконок XED9-NANO THEME 7.92т8з | 824 | 13 ноября 2022 г. | |
| Набор иконок XDX7-THEME 3.87z7e | 926 | 10 ноября 2022 г. | |
| Создатель наборов иконок v2 | 1277 | 14 сентября 2022 г. | |
| DOpus IconSetBuilder | 3122 | 24 августа 2022 г. | |
| Dopus логотип вектор SVG | 1194 | 30 июля 2022 г. | |
| Значки блокировки вкладок | 3249 | 9 июня 2010 г. | |
| Иконка DO из шапки форума | 3677 | 20 февраля 2021 г. | |
| Пара аддонов для сета Cris’ 10XP | 4684 | 29 марта 2019 г. | |
| Алфавитные стеклянные иконы | 4389 | 10 октября 2018 г. | |
| Справочник Opus BASIC Icons v2.0 Delta Drop-In замена | 6928 | 25 июня 2018 г. | |
| Каталог Opus 8 AEicon Set v1.0 (для Opus 9) | 3484 | 7 сентября 2008 г. | |
| Внутренние маленькие значки для контекстных меню | 6051 | 18 апреля 2018 г. | |
| Источник тысяч иконок (rocketdock.com) | 5335 | 25 января 2018 г. | |
| Справочник Opus BASIC Icons v2.0 — 592 новых плоских иконки Win8! | 15084 | 22 декабря 2017 г. | |
| 4391 | 17 декабря 2017 г. | ||
| Набор иконок звездного рейтинга | 3103 | 3 декабря 2017 г. | |
| Набор иконок S-DOX II (2 x 208 иконок) | 7925 | 8 ноября 2016 г. | |
| Каталог Opus 10 Значки панели инструментов XL по умолчанию — 250 значков! | 6793 | 31 октября 2016 г. | |
| Иконки для монитора сверхвысокой четкости 4K | 4624 | 19 марта 2016 г. | |
org/ListItem»>
Как сделать свои собственные пакеты иконок
