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スプライトを意味します。これは、 <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フォームの項目を同じ値に設定すると、この値は上記の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; " />