Внедрение iconfont в проект vue

Vue.js

задний план

Для внешнего интерфейса иконки быстро развиваются. отimgМетки, спрайты, иконки шрифтов,svg,четноеsvgТак же есть схема аналогичная Спрайтуsvg-sprite-loader. Спрайт карта ни о чем не говорит, просто используйтеbackground-positionдля позиционирования значков. Сегодня поговорим о том, как использовать иконки шрифтов иsvgзначок. На самом деле, значки шрифтов не чужие.bootstrap,font-awesome,element-uiЖдатьUIБиблиотеки в основном стандартные со значками шрифтов.

Кратко объясните принцип

unicodeсдержанныйE000-F8FFДиапазон используется как частная заповедная зона, аunicodeКод очень подходит для иконок шрифтов, а интерфейс основан наunicodeОтобразится соответствующий значок.

Проект vue представляет iconfont

1. Создайте новый проект в iconfont

iconfont新建项目

Примечание. Исправьте это здесь, префикс должен бытьtest-icon-.

2. Добавить значок в проект

添加图标至项目

3. Используйте иконочный шрифт

Метод Unicode (не рекомендуется)

использовать онлайн

  • index.scssПредставляем онлайн-шрифты в
@font-face {
    font-family: 'iconfont';  /* project id 1254715 */
    src: url('//at.alicdn.com/t/font_1254715_s1khj1whikd.eot');
    src: url('//at.alicdn.com/t/font_1254715_s1khj1whikd.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.woff') format('woff'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.svg#iconfont') format('svg');
}

  • используется на странице

    Очень недружелюбно использовать, используяunicodeКод указывает, что использование значка также должно идти вiconfontпроект, чтобы узнатьunicodeкод.

<template>
    <div>
        <i class="iconfont">&#xe7ee;</i>
        <i class="iconfont">&#xe7ed;</i>
        <i class="iconfont">&#xe7ec;</i>
        <i class="iconfont">&#xe7eb;</i>
    </div>
</template>

Схема эффекта выглядит следующим образом:

iconfont效果图

местное использование

Иногда сеть не настолько мощная, или это интранет-среда, поэтому не рассмотрите возможность использования онлайн-справочного метода.

  1. Для локального использования библиотеку шрифтов необходимо сначала загрузить и поместить в проект.

iconfont项目下载

  1. Определите следующий код в глобальном файле стиля

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

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

unicode方式本地引用iconfont

  1. Как использовать

    Так же, как онлайн-цитаты, оба используютunicodeкод для отображения значка.

    <template>
    <i class="iconfont">&#xe7ee;</i>
</template>

Суммировать

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

Метод класса шрифта (более дружественный)

Более дружелюбная оболочка, похожая наfont-awesome, мы просто используемclass, вы можете вызвать значок. Принцип заключается в использованииbeforeПсевдоэлемент для отображения значка.

использовать онлайн

Супер просто, просто сгенерируйте код онлайн и процитируйте онлайнcssфайл готов к использованию.

复制在线fontclass的css文件路径

существуетindex.htmlпроцитируйте его.

<link rel="stylesheet" href="//at.alicdn.com/t/font_1261797_48wm20jf8z.css">

Значок шрифта можно использовать в проекте.

<template>
    <i class="iconfont cl-icon-fold"></i>
    <i class="iconfont cl-icon-delete-solid"></i>
</template>

местное использование

а такжеunicodeАналогичным образом загрузите код в локальный. потому что я используюscssЧтобы управлять стилями, вам нужно извлечь ключевые части из загруженного кода. Помимо ссылки на библиотеку шрифтов,iconfont.cssопределено вbeforeВсе псевдоэлементы копируются в своиscssв файле.

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

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

// 列了一部分举例
.cl-icon-user:before {
  content: "\e64b";
}

.cl-icon-video:before {
  content: "\e66b";
}

.cl-icon-pause:before {
  content: "\e7bd";
}

.cl-icon-orgnazation:before {
  content: "\e61b";
}

Суммировать

  • Хорошая совместимость, поддержкаie8+и все современные браузеры.
  • в сравнении сunicodeСемантика ясна, а письмо более интуитивно понятно. можно легко отличить этоiconчто.
  • потому что использоватьclassчтобы определить значок, поэтому, когда вы хотите заменить значок, вам нужно только изменитьclassвнутриunicodeЦитировать.
  • Однако, поскольку шрифт по-прежнему используется в основном, многоцветные значки по-прежнему не поддерживаются.

предложение

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

символьный режим (поддерживает многоцветные значки)

svgизsymbolПредоставляет функцию, аналогичную Sprite, позволяющуюsvgОн становится проще в использовании, а также может удовлетворить потребности системы значков. может относиться кБлог Чжан ДаУзнать больше оsvg symbolзнание.

использовать онлайн

первый вiconfontэлемент выбранsymbolметодом и генерировать онлайнjsкод

在线svg symbol代码

затем вindex.htmlВставьте этот файл js в

<script src="//at.alicdn.com/t/font_1254715_oewlgci0ut.js"></script>

этоjsРоль заключается в создании в документеsvg symbol

1562638406124

Наконец, на странице черезuseиспользование ярлыкаsvgзначок тоже.xlink:hrefЗначение устанавливается соответствующимsymbolизidВот и все.

<svg aria-hidden="true">
    <use xlink:href="#test-icon-word-ext"></use> 
</svg>

Эффект следующий:

多色svg效果图

Многоцветные иконки по-прежнему круты!

местное использование

То же самое относится и к локальному использованию, в основном полагаясь на эту онлайн-генерацию.jsФайлы, онлайнjsСсылка на файл открывается в пустой вкладке браузера, вы можете получить его содержимое, затем скопировать содержимое и назвать его самостоятельноjsфайл и поместите его в каталог статических ресурсов локального проекта, вы можете обратиться к нему.

symbol的js文件

<script src="./static/js/symbols.js"></script>

Автоматическое управление иконками (обязательно к просмотру)

даже использоватьsymbolТаким образом, когда Miss Design добавляет значок, мы все равно не можем избежать повторного создания кода значка. Так есть ли более элегантное решение? Ответ положительный.svg-sprite-loader + require.context.

svg-sprite-loaderВ сети уже слишком много статей.

оrequire.context, у меня есть немного моего собственного понимания. пожалуйста, проверьтеИзображение поможет вам понять, что такое require.context в webpack..

Суммировать

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

первая ссылка

Категории