iconfontの3つの使い方を詳しく説明します。

私達のプロジェクトの中でいつもiconfontまで使用して、ここでアリババのベクトルの倉庫の提供するiconアイコンを使って、このアイコンの倉庫は十分に私達のために大量のアイコンを提供して、私達のまず必要な事はアリババのベクトルのアイコンの倉庫で自分のアカウントを新たに作って、そして新しいプロジェクトを作って、このプロジェクトはあなたのすべての使うアイコンを含みました。必要なアイコンを選んで自分のプロジェクトに置いて、自分のプロジェクトの下に置く必要があります。アイコンの更新が必要な場合は、パッケージのダウンロードも更新が必要です）
方式一：smbol方式を使用する（本質はsvgラベルで構成される）
第一歩：コードのより良い多重化のために、svg-inconコンポーネントを実装します。コードは以下の通りです。

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName" rel="external nofollow" ></use>
 </svg>
</template>
<script>
export default {
 name: 'svg-icon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String
  }
 },
 computed: {
  iconName() {
   return `#icon-${this.iconClass}` //   ：       svgClass     #icon，    symbol            
  },
  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>

ステップ2：main.jsに導入する

import '@/assets/icons/iconfont.js' //symbol       
import '@/assets/icons/iconfont.css' // Unicode fontclass      
import SvgIcon from '@/components/SvgIcon' //   icon  
Vue.component('svg-icon', SvgIcon) //       ，        

ステップ3：使用
自分が必要なコンポーネントの中で：

<template>
 <div>
 <!--   ：  svg-->
 <svg-icon class="h1" icon-class="iconfontzhizuobiaozhunbduan35"></svg-icon>
 <svg-icon class="h1" icon-class="hekriconshebeidengpao"></svg-icon>
 <!--   ：  unicode-->
 <i class="iconfont unicode">&#xe695;</i>
 <i class="iconfont unicode">&#xe63d;</i>
 <!--   ：  iconfontclass-->
 <span class="iconfont icon-baojingliebiao classicon"></span>
 </div>
</template>
<script>
// import '@/assets/icons/iconfont.css'
</script>
<style>
  .h1{
 width:50px;
 height:50px;
 font-size: 100px;
 }
 .unicode{
 font-size: 30px;
 }
 .classicon{
  /*      icon       */
 font-size: 100px; 
 color:red;
 }
</style>

もう2つの使い方はunicodeとfontclass方式を使って、上のコードのように導入と使用します。
そして、この3つの方法の長所と短所について話しましょう。
unicode:
利点:

互換性が一番いいです。ie 6+

をサポートします。

は、アイコンのサイズ、色などをフォントで動的に調整することができます。

短所:

は多色アイコン

をサポートしていません。

は、異なるデバイスブラウザのフォントでのレンダリングは少し違っています。ブラウザやシステムによって文字のレンダリングが異なり、表示の位置と大きさはfont-size、line-height、word-spacingなどのCSS属性の影響を受けるかもしれません。

は直感的ではありません。unicodeコードを見るとどんなアイコンが分かりにくいですか？

fontclass:

互換性が良好で、ie 8+

をサポートします。

はunicodeより語意が明確で、書くほうが直感的です。このiconは何ですか？

smbol:

は多色のアイコンをサポートしています。単色に制限されません。

は、フォントのようにfont-sizeによってスタイルを調整することをサポートしています。

サポートie 9+

は、CSSを利用してアニメーションを実現することができる。

は、HTTP要求を低減する。

ベクトル、スケーリングが歪みません。

は、SVGアイコンの各部分を精密に制御することができる

。
以上のように、個人的にはsmbolやfontclassを使うのがオススメです。
締め括りをつける
以上は小编が皆さんに绍介したiconfontの3つの使い方です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに皆さんに返事します。