Элегантное использование иконок в проектах Vue

Vue.js
Элегантное использование иконок в проектах Vue

предисловие

Значок очень часто используется в нашей повседневной разработке внешнего интерфейса.Есть много способов его использования.Сегодня его использование претерпело много изменений.В этой статье будет представлена ​​историческая эволюция значка и проанализированы его варианты использования.Преимущества и недостатки метод, мы будем использоватьsvg spritesИспользуйте значок таким образом и используйте vue+vue-cli3+ для демонстрационного кода.После прочтения вы обнаружите, что этот способ использования совершенно элегантен.

история трассировки

Введение тега img

Сначала, когда мы использовали значки, мы просто вводили изображения с тегами img, и мне лично казалось, что это нормально.

Однако на веб-странице будет много запросов ресурсов для значков img, что является ее самым большим недостатком.

Спрайты (css спрайты)

Позже мы начали использовать спрайты CSS для оптимизации запросов ресурсов.

Многие люди в Китае называют CSS-спрайты css-спрайтами/css-спрайтами (что угодно), что является своего рода методом обработки изображений веб-страницы. Он позволяет включать все спорадические картинки, задействованные на странице, в одну большую картинку, чтобы при посещении страницы загруженные картинки не отображались медленно одна за другой, как раньше. Ключ к ускорению не в снижении качества, а в уменьшении количества

CSS Sprites фактически интегрируют некоторые фоновые изображения на веб-странице в файл изображения, а затем используют CSSbackground-image background- repeat background-positionСочетание , для фонового позиционирования,background-positionПоложение фонового изображения можно точно определить по номерам

Использование спрайтов CSS может значительно сократить HTTP-запрос веб-страниц, тем самым значительно повысив производительность страницы, что также является самым большим преимуществом спрайтов CSS.

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

Библиотека шрифтов

Затем позже появился библиотека шрифтов, которая является библиотекой значка шрифта, она, кажется, нас разработать отличное удобство, но также очень простым в использовании, почему значок Fonts удобно, потому что мы можем найти непосредственно с значка библиотеки значка шрифта Market Font, Также можно хорошо контролировать некоторые основные стили

Самая широко используемая и наиболее полная библиотека иконок в Китае, я думаю, это библиотека векторных иконок Ali (iconfont).Иконок не так уж много.Самое главное, что она с открытым исходным кодом и бесплатна.

Возьмем, к примеру, iconfont, его можно использовать тремя способами, а именно:unicode，font-class，symbol, очень простые

Конечно, друзья, которые не использовали его, напрямую ищут ключевое слово iconfont на Baidu, я думаю, вы посмотрите.

Далее давайте рассмотрим преимущества и недостатки этих трех методов (официальных):

Сравнение использования шрифтов

ссылка на юникод

unicode — это самое примитивное применение шрифтов в Интернете, включающее:

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

Примечание: Новая версия iconfont поддерживает многоцветные значки. Эти многоцветные значки нельзя использовать в режиме юникода. При необходимости рекомендуется использовать метод ссылки на символы.

Шаги для использования Unicode следующие:

Шаг 1: Скопируйте шрифт, созданный в рамках проекта.
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
Шаг 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">&#x33;</i>

ссылка на класс шрифта

Font-class — это вариант использования юникода, в основном для решения проблемы неинтуитивного написания и неясного семантического значения юникода.

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

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

Шаги использования следующие:

Шаг 1: Скопируйте код класса шрифта, созданный в рамках проекта:
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
Шаг 2: Выберите соответствующий значок и получите имя класса, которое будет применяться к странице:
<i class="iconfont icon-xxx"></i>

ссылка на символ

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

  • Поддержка многоцветных значков, больше не ограниченных одним цветом.
  • С некоторыми ухищрениями поддержка вроде шрифтов, черезfont-size,colorдля настройки стиля.
  • Плохая совместимость, поддерживает ie9+ и современные браузеры.
  • Производительность браузерного рендеринга svg средняя, ​​не такая хорошая, как png.

Шаги использования следующие:

Шаг 1: Скопируйте код символа, сгенерированного под проектом:
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.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>

Я полагаю, что все знают преимущества и недостатки трех вышеупомянутых поз. Использование символа является темой этой статьи. На самом деле, я всегда использовал класс шрифта раньше (вы, вероятно, часто его используете), но это немного громоздко. , потому что каждый раз, когда я итерирую проект, мне приходится загружать новый пакет для изменения или добавления значков, и он не поддерживает многоцветные значки, но теперь я думаю, что решил изменить его, потому что я получил лучший способ , это символ

символ, он поддерживает многоцветные значки и совместим с ie9+, что ничего.В конце концов, определенный e-браузер почти полностью крут, и браузер, отображающий производительность svg, также может быть выполнен без беспокойства.Еще в 2014 году сообщение Чжан СиньсюйВведение в SVG-спрайтОн отлично интерпретирует то, как работает спрайт svg, и я очень оптимистичен в этом. Может быть, это видение большого парня - _ -

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

Элегантное использование иконок в проектах

Создайте среду, чтобы получить значок

Мы используем vue-cli3 для сборки проекта

Как быть элегантным, сначала мы создаем новый в каталоге srcicons/папка, вicons/в папкеsvg/Папка, проект будущего, мы будем унифицированы в иконке svg, размещенной здесь

Далее получаем svg иконку на официальном сайте

no1

Нажмите, чтобы загрузить SVG вicons/svgИзмените имя файла на каталогqq.svg, или вicons/svgСоздайте новый в каталогеqq.svgфайл, вы также можете поместить в него скопированный код svg

Таким образом получается иконка, которую очень легко

Обработка значка SVG

vue-cli имеет значение по умолчанию для файлов svgurl-loaderОбработка, нам нужно настроить ее отдельно для использования значков svg

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

нпм скачать

npm install svg-sprite-loader -D

скачать пряжу

yarn add svg-sprite-loader -D

Как мы его используем, во-первых, мы не можем перезаписать исходный загрузчик синтаксического анализа svg, нам нужно только поставитьicons/svgФайлы svg в этой папке можно анализировать и упаковывать.vue.config.jsНастраивается в функции chainWebpack, смотрите код

// 内置路径包
const path = require("path");

// 定义resolve方法，获取绝对路径
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  // 一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例
  // 允许对内部的 webpack 配置进行更细粒度的修改
  chainWebpack: config => {
    // 配置svg默认规则排除icons目录中svg文件处理
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();

    // 新增icons规则，设置svg-sprite-loader处理icons目录中svg文件
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({ symbolId: "icon-[name]" })
      .end();
  }
}

Если мы не знаем конфигурацию cli по умолчанию и боимся ошибиться, мы можем просмотреть внутреннюю конфигурацию webpack через vue inspect.Подробнее см.:проверить использование

В приведенном выше коде мы используем расширенное использование webpack для обработки загрузчиков, сначала исключая для нас загрузчики svg по умолчанию.icons/Обработка файлов svg в каталоге, а затем добавлено новое правило, позволяющееsvg-sprite-loaderиметь дело с намиicons/svg в папке, и, наконец, мы устанавливаемicon-Добавьте имя обработанного файла svg как symbolId, что означает, что мы используемqq.svgможет использоваться непосредственно в теге использования#icon-qq, для тех, кто не знает о цепных операциях, можно прочитать:цепная операция (дополнительно)

В коде, который мы ввелиpathТакой встроенный пакет определяетresolveметод, этот метод в основном для получения абсолютного пути к файлу.Мы используем этот метод для преобразования пути, где путь используется в абсолютный путь.Конечно, можно также использовать относительный путь, но это не очень безопасно Существуют различия в разрешении платформ относительных путей, поэтому абсолютные пути являются самыми безопасными

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

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

существуетmain.jsВведите (глобальный импорт) файл значка, который будет использоваться

import "@/icons/svg/qq.svg";

используется в шаблоне

<svg>
  <use xlink:href="#icon-qq"></use>
</svg>

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

Файлы Advanced-svg автоматически импортируются

знаю, почемуicons/Существует также папка для хранения файлов SVGsvg/Папка?Подготовлена ​​для этого шага автоматического введения.Мы находимся вicons/новая папкаindex.jsфайл, две строки кода сделаны, содержание следующее

// icons图标自动加载
const req = require.context("./svg", false, /\.svg$/);
req.keys().map(req);

В приведенном выше коде мы используемrequire.contextустановить текущий каталог./svgФайл является контекстом, и обычное совпадение используется для сопоставления имени файла, которое необходимо обнаружить, чтобы оно соответствовало имени файла, соответствующему правилу в папке svg текущего каталога.

Затем мы используемreq.keysПолучите все массивы имен файлов, а затем используйте обход карты для загрузки метода req, чтобы при вызове файла он проходил и загружал все соответствующие файлы, что очень приятно.

Ознакомьтесь с нашим улучшенным использованием:

Закомментируйте предыдущий код, вmain.jsвведен вicons/index.jsдокумент

import "@/icons/index.js";

Шаблон такой же, как и выше, но на этот раз, когда мы снова загружаем значок svg, нет необходимости снова вводить значок svg, потому что мы сделали автоматизацию,icons/svg/Следующие файлы значков суффикса svg могут быть автоматически импортированы

<svg>
  <use xlink:href="#icon-qq"></use>
</svg>

<svg>
  <use xlink:href="#icon-wx"></use>
</svg>
...

Разве это не удобно, вы думаете, что все кончено? Нет, мы все еще можем упростить его, потому что слишком хлопотно оборачивать использование в тег svg каждый раз, когда он используется, и это не очень элегантно писать.Мы продолжаем его упрощать, и это должно выглядеть очень элегантно для использования .

Повторно расширенный - компонент SvgIcon

существуетcomponents/новый каталогSvgIcon/index.vueфайл, пишем компонент svgicon, инкапсулируем его и регистрируем глобально, так что пользоваться будет очень удобно!

Код компонента svg-icon выглядит следующим образом:

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    }
  }
};
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

Конечно, мы также можем расширить компоненты в соответствии с нашей собственной проектной ситуацией.Я написал базовую конфигурацию здесь.

После того, как компонент написан, мы находимся вicons/index.jsВсе глобально зарегистрировано, поэтому мы только что ввели документ, который может быть достигнут автоматически загруженным, и два функциональных компонента зарегистрированы

icons/index.jsУлучшения заключаются в следующем:

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon";

// icons图标自动加载
const req = require.context("./svg", false, /\.svg$/);
req.keys().map(req);

// 全局注册svg-icon组件
Vue.component("svg-icon", SvgIcon);

Наконец, это наше использование, вmain.jsимпорт файловicons/index.js

import "@/icons/index.js";

Давайте посмотрим, как мы используем иконки в компоненте:

<template>
  <svg-icon icon-class="qq" class-name="qq-style"></svg-icon>
</template>

Смотрите, мы используем толькоicon-classПросто передайте имя файла значка, которое будет использоваться, конечноclass-nameВы также можете пройти курс и сделать несколько простых модификаций стиля. Разве это не очень элегантно, у вас получилось?

Нелегко кодировать слова, двигать руками, следовать, типа или что-то в этом роде, ха-ха

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

Добавить Автора

Почта:214930661@qq.com

GitHub: github.com/isboyjc

Справочная статья:

Будущее должно быть жарким: внедрение технологии SVG Sprites — Чжан Синьсюй

Из рук в руки, принесите вам элегантное использование иконок-самородков

Категории