vue iconfont

VUE ICONFONT

Используйте Iconfont.cn более элегантно и поддерживает как font-class 引入, так и symbol 引入.

Установить

 # Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN: JSdelivr | UNPKG (можно использовать через window.VueIconfont )

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

Сначала установите VueIconfont с помощью Vue.use :

 import Vue from 'vue'
import VueIconfont from 'vue-iconfont'

Vue . use ( VueIconfont /*, options*/ )

// ......

Тогда его можно использовать в компоненте, как это:

 < icon name =" right " /> 

параметры

Параметры	тип	значение по умолчанию	иллюстрировать
ярлык	String	icon	Метка компонента значков.
тип	font | svg	font	font : представляет значок шрифта, представленную с помощью шрифта. svg : представляет значок SVG, представленную с символом.
префикс	String	-	Представляет префикс имени класса или префикс имени значка SVG.
Семья	String	= prefix	Только действительный, когда type является font , указывающим на класс с набором стиля font-family .
спрайт	String	-	Только действителен, когда type svg , это означает SVG Sprite, который будет автоматически загружаться, например: <svg><symbol id="ok">......</symbol></svg>
компонент	{ name: String, 'props': Object, beforeRender: context => void }	{name: 'icon', 'props': {}, beforerender: () => {}}	name представляет параметр name компонента», props представляет опцию props компонента, beforeRender - это функция, которая получает контекст рендеринга в компоненте функции VUE, и вы можете применить изменения в контексте.

Полный пример

Конфигурация проекта

1. Откройте图标管理> 我的项目и выберите проект.

2. Нажмите更多操作> 编辑项目:

3. Установите FontClass/Symbol 前缀и элемент формы Font Family на то же значение, и это значение является prefix в вышеуказанных options :

4. Нажмите下载至本地чтобы извлечь файл значка в папку проекта.

Установить

Вы можете использовать Vue.use(VueIconfont, [options1, options2, ..., optionsN]) для определения различных компонентов значков по мере необходимости.

 // index.js
import Vue from 'vue'
import VueIconfont from 'vue-iconfont'
import App from './app.vue'

// 引入上面下载得到的使用 font-class 图标必须的 css 文件
import './iconfont/iconfont.css'

// 引入上面下载得到的使用 SVG 图标必须的 js 文件
import './iconfont/iconfont.js'

Vue . use ( VueIconfont , [
  // 定义 v-icon 组件以使用 font-class 图标
  {
    tag : 'v-icon' ,
    prefix : 'v-icon' ,
    type : 'font'
  } ,

  // 定义 v-svg-icon 组件以使用 SVG 图标
  {
    tag : 'v-svg-icon' ,
    prefix : 'v-icon' ,
    type : 'svg'
  }
] )

new Vue ( {
  el : '#app' ,
  render : h => h ( App )
} )

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

 <!-- app.vue -->
< template >
  < div >
    < v-icon name =" right " />
    < v-svg-icon name =" right " />
  </ div >
</ template > 

Как установить цвет значков, размер и т. Д.?

Просто установите свой CSS:

 < v-icon name =" right " style =" color: red; font-size: 2em; " />
< v-svg-icon name =" right " style =" color: blue; font-size: 14px; " />