vue iconfont

vue iconfont

iconfont.cn을 더 우아하게 사용하고 font-class 引入및 symbol 引入모두 지원하십시오.

설치하다

 # Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN : JSDELIVR | unpkg ( window.VueIconfont 를 통해 사용할 수 있음)

사용

Vue.use 사용하여 VueIconfont 먼저 설치하십시오.

 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 }	{이름 : '아이콘', '소품': {}, beforerender : () => {}}	name 구성 요소의 name 옵션을 나타내고, props 구성 요소의 props 옵션을 나타냅니다. beforeRender vue 함수 구성 요소에서 렌더의 컨텍스트를 수신하는 함수이며 컨텍스트에 변경 사항을 적용 할 수 있습니다.

완전한 예

프로젝트 구성

1. 图标管理> 我的项目열고 프로젝트를 선택하십시오.

2. 更多操作> 编辑项目:

3. FontClass/Symbol 前缀및 Font Family Form 항목을 동일한 값으로 설정하면이 값은 위 options 의 prefix 입니다.

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; " />