Прикоснитесь к своей руке, чтобы элегантно использовать значок

внешний интерфейс SVG Icon Vue.js
Прикоснитесь к своей руке, чтобы элегантно использовать значок

предисловие

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

История развития

Для начала поговорим об истории развития фронтенд-иконок.

древние временаКогда я впервые начал свою стажировку, большинство иконок были реализованы с помощью img. Постепенно я обнаружил, что на изображение img приходится большая часть запрошенных ресурсов страницы, поэтому для оптимизацииimage spriteЭто так называемое изображение спрайта, которое объединяет несколько изображений в одно изображение, а затем использует фоновую позицию css для отображения различных значков значков. Но у этого также есть большая проблема, и обслуживание сложно. Каждый раз, когда вы добавляете значок, вам нужно изменить исходное изображение, и вы можете случайно сделать ошибку и повлиять на ранее расположенное изображение, и как только вы измените изображение спрайта, кеш изображения станет недействительным, и вы не знаете как сохранить его с течением времени.

библиотека шрифтовПостепенно в проекте практически не используются локальные изображения, а для реализации иконок страниц используются некоторые библиотеки шрифтов. распространен какFont Awesome,тоже очень удобен в использовании,но у него есть фатальный минус,что его действительно неудобно находить.Нужно много глаз каждый раз находить иконку,и кастомизация ее тоже очень недружественная.Его иконка Есть всего 675 иконок в библиотеке, что немного, но все равно часто бывает, что нужную иконку не найти. Конечно, это можно терпеть для стартапов без особой погони за пользовательским интерфейсом. Но по мере того, как компания растет, все больше и больше людей указывают пальцем на переднюю часть, сумасшедшие дизайнеры, они скажут нет! Иконка такая уродливая, это оскорбление их звания старшего дизайнера! Но, к счастью, сейчасiconfont.

iconfontГалерея с открытым исходным кодом, сделанная отцом Али, также есть специальныеgithub issue(Хотя я не отвечал на один из своих вопросов более полугода/(ㄒoㄒ)/~~), количество иконок по-прежнему поражает, не только библиотеки иконок с открытым исходным кодом сотен компаний, но и различные Он также поддерживает индивидуальное создание библиотек значков, поэтому, независимо от того, являетесь ли вы начинающей компанией или компанией с высокими требованиями к дизайну, он может помочь вам решить болевые точки, связанные с управлением значками. В общем, все, что вы хотите~

три позы

unicode

Изначально мы использовалиunicodeформате, его основными особенностями являютсяПреимущество

  • Лучшая совместимость, поддержка ie6+
  • Поддерживает динамическую настройку размера значков, цвета и т. д. по шрифту.

недостаток

  • Многоцветные значки не поддерживаются
  • Отображение шрифтов в разных браузерах устройств будет немного отличаться.В разных браузерах или системах отображение текста отличается, и на его положение и размер отображения могут влиять CSS, такие как размер шрифта, высота строки, расстояние между словами. , и т.д. Атрибут влияет, и это влияние сложнее настроить

Инструкции:Первый шаг: введение пользовательского шрифта `font-face

 @font-face {
   font-family: "iconfont";
   src: url('iconfont.eot'); /* IE9*/
   src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('iconfont.woff') format('woff'), /* chrome, firefox */
   url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
 }

Шаг 2. Определите стиль, в котором используется иконочный шрифт.

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

Шаг 3: Выберите соответствующий значок и получите код шрифта, примените его к странице.

<i class="iconfont">&#xe604;</i>

Изображение эффекта:

На самом деле его принцип тоже очень прост, т. е. через@font-faceВнедрить пользовательские шрифты (фактически библиотеку шрифтов), которая предусматривает&#xe604Эта соответствующая форма длинная. По сути, это похоже на «цветочные штаны», отличающиеся разными настройками шрифта.

Однако очевидны и его недостатки.unicodeНаписание не интуитивное, и смысл неясен. только смотреть&#xe604;этоunicodeВы совершенно не представляете, что это значит. Тогда естьfont-class.

font-class

По сравнению с использованием Юникода он имеет следующие характеристики:

  • Хорошая совместимость, поддержка ie8+
  • По сравнению с семантикой Юникода запись более интуитивно понятна. Легко сказать, что это за значок.

Инструкции:Шаг 1: Скопируйте код класса шрифта, созданный в рамках проекта:

../font_8d5l8fzk5b87iudi.css

Шаг 2: Выберите соответствующий значок и получите имя класса, которое будет применяться к странице:

<i class="iconfont icon-xxx"></i>

Изображение эффекта:

image.png

Его основной принцип на самом делеunicodeто же самое, он просто делает еще один шаг, изменяя исходный&#xe604Это написание заменено на.icon-QQ, который записывается в атрибуте before каждого классаunicode, избавляет от проблем с человеческим письмом. Такие как.icon-QQ:before { content: "\e604"; }

относительноunicodeЕго модификация более удобна и интуитивно понятна. Но есть и большая яма.Раньше арендодатель использовал две группы в проектеfont-classИз-за отсутствия пространства имен все классы помещены в.iconfontПод пространством имен возникали различные лавинные проблемы при выходе в сеть, и оно долгое время модифицировалось, так что используйтеfont-classОбязательно обратите внимание на проблему пространства имен.

symbol

По мере того, как злой браузер XX постепенно сходит с исторической сцены, использование svg-icon постепенно становится основным и рекомендуемым методом. Статьи по теме см. в статье Чжан Синьсюй.Будущее должно быть жарким: внедрение технологии SVG Sprite

  • Поддержка многоцветных значков, больше не ограниченных одним цветом.
  • Поддерживает настройку стиля с помощью размера шрифта и цвета шрифтов.
  • Поддержка ie9+
  • Анимации могут быть реализованы с помощью CSS.
  • Уменьшите количество HTTP-запросов.
  • Вектор, масштаб без искажений
  • Детальный контроль над каждой частью значка SVG

Инструкции:Шаг 1: Скопируйте код символа, созданный в рамках проекта:

引入  ./iconfont.js

Шаг 2: Добавьте общий код css (введите один раз):

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

Шаг 3: Выберите соответствующий значок и получите имя класса, примените его к странице:

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

Преимущество использования svg-icon в том, что мне никогда не нужно отправлятьwoff|eot|ttf|Эти многие библиотеки шрифтов запрашиваются, и все мои SVG могут быть включены в HTML.

Другое дело, что svg — это настоящий вектор, сколько бы вы его ни масштабировали, он не будет искажаться и размываться, а атрибутов, которыми может управлять svg, больше, и иконки можно сделать более яркими и сложными. Теперь дизайнеры пользовательского интерфейса обычно предпочитают использовать эскиз для работы, и они могут экспортировать svg одним щелчком мыши, поэтому дизайнеры также предпочитают svg.Inline SVG vs Icon Fonts В этой статье подробно сравниваетсяsvgа такжеicon-fontПлюсы и минусы, мы можем пойти и посмотреть. PS: это на самом деле используется здесьSVG SpriteТехнология. Простое понимание - это похожее на svg изображение, похожее на спрайт. Он использует символы для обозначения значков svg один за другим в svg. Таким образом, когда мы встречаем один и тот же svg на странице, нам не нужно рисовать еще один. , и использовать его напрямую.<use xlink:href="#icon-QQ" x="50" y="50" />Его можно использовать, а конкретные подробности можно найти в статье в начале этой статьи.Будущее должно быть жарким: внедрение технологии SVG Sprite, в следующих статьях, потрогаю руками и расскажу как сделать самомуSVG Sprite.

Создайте компонент icon-component

Теперь, когда у нас есть значок, следующим шагом будет элегантное его использование в наших собственных проектах. Следующий код основан на экземпляре vue (ps: реагировать тоже очень просто, принципы схожи)

//components/Icon-svg
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>



//引入svg组件
import IconSvg from '@/components/IconSvg'

//全局注册icon-svg
Vue.component('icon-svg', IconSvg)

//在代码中使用
<icon-svg icon-class="password" />

Он просто инкапсулируетIcon-svgКомпоненты, мы можем просто и элегантно использовать значки в наших проектах Vue.

дальнейшее обновление

Но как сильному front-end разработчику как мы можем быть довольны этим!В настоящее время есть еще фатальный недостаток,т.svg-spriteВсе через иконный шрифтiconfont.jsСгенерировано.

  • Во-первых, это фрагмент кода, который использует js для генерации svg, все иконки оченьНе интуитивный.

如图所示
Вы вообще не знаете, какое имя значка соответствует какому значку, и у вас на лице знак вопроса???Каждый раз, когда вы добавляете, удаляете или изменяете значок, вы можете заменить только весь файл js вместе.

  • Во-вторых, нельзянагрузка по требованию, не может быть динамически сгенерирован на основе тех svg, которые мы используемsvg-sprite.
  • Плохая настройка, обычно экспортируемый svg содержит много бесполезной информации, такой как исходная информация редактора, комментарии и т. д. Обычно содержит другое содержимое, которое не влияет на результат рендеринга или может быть удалено.
  • добавить недружественный, если у меня есть пользовательские значки svg, как я могу сопоставить оригиналiconfontобъединены вместе? В настоящее время его можно загрузить только наiconfontОчень громоздко поместить его в библиотеку проекта с оригинальной иконкой, а потом скачать заново.

Использование svg-спрайта

Дальше будем делать своиsvg-sprite. использовать здесьsvg-sprite-loaderЭтот артефакт представляет собой загрузчик веб-пакетов, который может упаковывать несколько svg вsvg-sprite.

Давайте покажем, какvue-cliНа основе преобразования, добавляяsvg-sprite-loader.

мы обнаруживаемvue-cliбудет использоваться по умолчаниюurl-loaderобработайте svg, он будет помещен в/imgкаталог, так что в это время мы представляемsvg-sprite-loaderКакие-то конфликты возникнут.

//默认`vue-cli` 对svg做的处理，正则匹配后缀名为.svg的文件，匹配成功之后使用 url-loader 进行处理。
 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

Есть два решения.Самое простое это можно убрать svg теста,чтобы svg не обрабатывался.Конечно,это очень недружелюбно.

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

Поэтому самый безопасный и разумный подход — использовать webpackexcludeа такжеinclude,Позволятьsvg-sprite-loaderПросто разберитесь с SVG, ниже вы указываете папку,url-loaerОбрабатывать только все svg кроме этой папки, что отлично решает проблему предыдущих конфликтов. код показывает, как показано ниже

Это настроено, просто введите имя класса после импорта svg

import '@/src/icons/qq.svg; //引入图标

<svg><use xlink:href="#qq" /></svg>  //使用图标

Одно это все еще очень неэлегантно.Если у меня в моем проекте сотня иконок, мне нужно вручную вводить их одну за другой!Лень — первая продуктивность программистов! ! !

автоматический импорт

Сначала мы создаем папку, предназначенную для размещения значков, таких как:@/src/iconsПоместите все ICON в эту папку. После этого мы будем использовать Webpackrequire.context. много людей дляrequire.contextЭто может быть незнакомо, простое объяснение

require.context("./test", false, /.test.js$/); Эта строка кода перейдет в тестовую папку (без подкаталогов), чтобы найти все имена файлов, начинающиеся с.test.jsФайл, оканчивающийся на требуемый файл. Грубо говоря, мы можем импортировать соответствующий файловый модуль через обычное сопоставление.

require.context имеет три параметра:

  • directory: указывает каталог, который нужно получить
  • INSEBDIRECTIONES: вы проверяете подкаталог
  • regExp: регулярное выражение для сопоставления файлов

Поняв это, мы можем написать это, чтобы автоматически ввести@/src/iconsВсе значки ниже

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

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

Дальнейшая оптимизация собственного svg

Сначала давайте посмотрим на это阿里iconfontКак экспортированный svg выглядит на сайте?

Правильно, хотя содержимое svg, экспортируемое веб-сайтом iconfont, довольно упрощено, вы обнаружите, что в нем по-прежнему много бесполезной информации, вызывающей ненужную избыточность. Даже svg, экспортируемый веб-сайтом iconfont, похож на этот, не говоря уже о svg, экспортированном дизайнерами, которые больше озабочены тем, красивый интерфейс или нет. к счастьюsvg-sprite-loaderПринимая это во внимание, в настоящее время он получает только содержимое пути в svg и не получает никакой другой информации. Сгенерируйте svg, как показано ниже:

Но любая избыточная информация, которую вы создаете в пути, не будет обработана. как записка или что-то

На данный момент мы собираемся использовать другую полезную вещь —svgo

SVG files, especially exported from various editors, usually contain a lot of redundant and useless information such as editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting SVG rendering result.

Он поддерживает десятки оптимизаций, очень мощный, 8K + STAR тоже достаточно, чтобы объяснить проблему.

Подробную информацию о работе см.официальная документация Отличная статья Чжан Синьсюй(Да, это снова эта большая статья, может быть, это большой парень!) Эта статья не будет расширяться.

напиши в конце

Вышеизложенное описывает историю развития использования иконок во внешних проектах. В общем, это одна и та же фраза,Подходит лучше всего. Выбирая в предыдущей дискуссии vue react или angular, я лично считаю, что каждый фреймворк имеет свои особенности и применимые бизнес-сценарии, поэтому все рекомендации и обсуждения, которые не объединяют бизнес-сценарии, являются слепыми бб. . . Как упоминалось выше, существует пять сценариев использования значков во внешнем интерфейсе.Font AwesomeНе использовать его не потому, что это плохо, а потому, что он не подходит для бизнес-сценариев.Если в вашей команде нет выделенного дизайнера или настройка значка не высока, вы можете использовать его.Font Awesomegithub имеет более 50 000 звезд, что свидетельствует о его признании сообществом. Например, у вашего проекта повышенные требования к адаптации под младшие браузеры, а вы все равно насильно используете svg в качестве значка значка, значит, вы действительно боретесь с собой. Таким образом, нет абсолютного преимущества или недостатка во всех решениях.Решение, которое подходит для вашего бизнес-сценария, решает ваши реальные проблемы и повышает эффективность вашей разработки, является хорошим решением.

Чжанкэн

Методы, описанные в этой статье,vue-element-adminПолный пример можно найти в .vue-element-adminТакже выпустил новую версию и поддерживающуюкитайский документ(Я буду блевать кровью, когда документ будет действительно написан) Независимо от того, используете ли вы этот проект или нет, рекомендуется взглянуть. Это должно быть полезно для вашего проекта Vue. Использование и недостатки приветствуются. Бесплатно для владельцакруг.

Серия статей:

Категории