SVGВекторную графику можно масштабировать. По сравнению с обычными картинками, при увеличении не искажается, а размер файла меньше. Теперь браузеры очень хорошо поддерживают SVG, мы часто используем его в проектах, например, используя значки SVG или используя изображения SVG для решения экранов высокой четкости.проблема с отображением 1px.
В этой статье в основном речь пойдет об использовании иконок SVG, и будут даны соответствующие решения с примерами. Статья будет разделена на две части: первая часть, которая в основном знакомит с соответствующими знаниями о SVG, знакомит с тем, как использовать gulp для объединения значков, и пишет компонент Icon. В следующей части я расскажу, как написать плагин webpack для обработки файлов SVG.
1. SVG-иконки
Если вы используете SVG для иконок, вы должны сравнить его со шрифтом iconfont. Совместимость iconfont лучше, но эффект отображения не так хорош, как у SVG, и он не поддерживает многоцветные значки. Так что теперь этоРекомендуются значки SVG.
Существует несколько способов использования значков SVG в ваших проектах, один из которых — SVG Sprite, объединяющий отдельные значки в одно фоновое изображение. Но этот метод очень негибкий, например, мы не можем настроить размер или цвет иконки.
Напротив, лучший способ использовать символы SVG. Объедините каждый значок в один файл SVG, содержащий несколько символов. Если вам нужно использовать значок, вы можете обратиться к соответствующему символу.
Предположим, имеется следующий файл символов, содержащий значок с идентификатором QQ.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="QQ" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87 23c-1.42 3.49-1.67 6.78-.54 7.37.79.44 2.06-.54 3.24-2.31a9.73 9.73 0 0 0 3.24 5.11C7.09 33.82 6 34.9 6 36.08c0 2 3 3.58 6.78 3.58 3.39 0 6.19-1.28 6.73-3h.79c.54 1.72 3.34 3 6.73 3 3.78 0 6.78-1.57 6.78-3.58 0-1.18-1.13-2.26-2.85-2.9a9.73 9.73 0 0 0 3.24-5.11c1.18 1.77 2.41 2.75 3.24 2.31 1.18-.59.93-3.93-.54-7.37-1.13-2.7-2.65-4.71-3.83-5.16v-.54a5.32 5.32 0 0 0-.79-2.8v-.2A2.92 2.92 0 0 0 32 13C31.69 5.93 27.18.33 19.86.33S8 5.93 7.73 13a2.92 2.92 0 0 0-.29 1.33v.2a5.32 5.32 0 0 0-.79 2.8v.54C5.57 18.31 4 20.27 2.87 23z"/>
</symbol>
</svg>
Чтобы использовать этот значок сейчас, можно ввести соответствующий символ, установив идентификатор.
<svg class="icon icon-QQ">
<use xlink:href="#QQ"></use>
</svg>
Добавляем к значку имя класса, и при необходимости можем настроить стиль значка через CSS. Этот метод имеет сильную управляемость и хороший эффект отображения.
2. Использование gulp-svg-sprite
Иконки, которые дал нам дизайнер, все картинки, почти как на картинке ниже.
Затем SVG необходимо объединить и сжать. Самый простой способ - использоватьБиблиотека векторных иконок AlibabaДля управления иконками, если вам нужно использовать файлы символов, вы можете добавить скрипты на страницу. Если вам нравится такой способ, то вам не нужно это перечитывать 😂.
Здесь мы используем gulp и gulp-svg-sprite для обработки иконок SVG.gulp-svg-spriteЭто плагин gulp, специально используемый для обработки изображений SVG, обеспечивающий функцию создания фоновых изображений спрайтов и файлов символов. Ниже приведен файл конфигурации gulp.
const gulp = require('gulp')
const svgSprite = require('gulp-svg-sprite')
const config = {
// 去除 svg icon 颜色
svg: {
transform: [
function (svg) {
return svg.replace(/(<style.*?<\/style>)/g, '').replace(/(fill=\"#([0-9a-f]{6})\")/g, '')
}
]
},
mode: {
view: {
bust: false,
sprite: 'sprite.svg',
render: {
css: true
}
},
symbol: true
}
}
gulp.task('svgSprite', function () {
return gulp.src('./icon/*.svg').pipe(svgSprite(config)).pipe(gulp.dest('svg'))
})
gulp.task('default', ['svgSprite'])
установивmodeнастроить генерацию разных типов файлов. В приведенной выше конфигурации мы выбрали создание фоновых изображений и файлов символов. Некоторые цвета предустановлены в некоторых SVG-иконах, поэтому перед объединением их в файлы символов их необходимо обесцветить. настроить плагинtransformфункция для завершения обесцвечивания.
Выполнить в каталоге папки проектаgulpкоманда, сгенерированный файл выглядит следующим образом.
Затем скопируйте содержимое sprite.symbol.svg в index.html и сделайте элемент SVG скрытым. После этого компонент Icon готов к использованию. Этот шаг делается вручную, что очень неудобно, поэтому в следующей части мы автоматически вставим содержимое файла символов в index.html, разработав плагин для веб-пакета.
<!-- index.html -->
<body>
<!-- 拷贝 symbol 文件到这里 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<symbol id="QQ">
<!-- .... -->
</symbol>
</svg>
<div id="app"></div>
</body>
3. Реализация компонента Vue Icon
Какие функции или параметры предоставляет разрабатываемый сейчас компонент Icon? Временно выдвигаются следующие требования:
- Установите значение типа, чтобы указать значок для использования
- Размер значка можно настроить
- Вы можете установить цвет значка
Пример выглядит следующим образом:
<template>
<svg :class="iconClassName" :style="{color: this.color}">
<use :xlink:href="'#' + type"></use>
</svg>
</template>
<script>
export default {
name: 'icon',
computed: {
iconClassName () {
return ['icon', `icon-${this.size}`, `icon-${this.type}`]
}
},
props: {
type: {
required: true,
type: String,
validator (value) {
return ['wechat', 'QQ', 'weibo'].indexOf(value) !== -1
}
},
size: {
type: String,
default: 'medium',
validator (value) {
return ['small', 'medium', 'large'].indexOf(value) !== -1
}
},
color: {
type: String,
default: '#cccccc'
}
}
}
</script>
<style lang="scss">
.icon {
display: inline-block;
vertical-align: middle;
fill: currentColor;
&.icon-medium {
width: 24px;
height: 24px;
}
// ...
}
</style>
Компонент Icon поставляется в трех размерах, средний по умолчанию. Цвет значка можно настроить, по умолчанию#cccccc. При объединении значков SVG цвет самого значка удаляется. Это есть в правиле стиля для настройки значкаfill: currentColor;, этот атрибут указывает, что цвет заливки пути SVG наследует цвет текущего элемента, поэтому мы можем настроить цвет значка.
Для двух реквизитов компонента Icon: тип и размер, написана функция валидатора для проверки входящего значения реквизита.Если входящее значение реквизита является недопустимым, в среде разработки появится сообщение об ошибке, что позволит избежать неправильного использования Компонент Icon Проблема.
После того, как компонент зарегистрирован, вы можете использовать его напрямую.
<icon type="QQ" />
полный код нажмитездесь.
4. Резюме
В этой статье мы завершили слияние иконок SVG и написание компонентов Icon. Иконки SVG очень подходят для использования в проектах из-за их собственных преимуществ и хорошей поддержки браузерами. Надеюсь, вы сможете изучить больше применений.
существуетследующая статьяВ , мы будем избегать ручного копирования и вставки файлов символов SVG, разработав подключаемый модуль веб-пакета.