vue使用自定义icon图标的方法

Vue使用自定义icon图标的方法可以分为以下几步：

1. 准备icon图标

首先需要准备好自定义icon图标，在这里我假设我们已经有了一些自定义icon的svg文件，这些svg文件可以通过一些工具(如iconfont、阿里巴巴图标库等)生成，也可以手工编写，例如：

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
  <path d="M13.824 1.702c-.859-.24-1.81.05-2.358.814l-4.81 6.086c-.716.904-2.055.832-2.71-.137-.474-.6-.474-1.467 0-2.067.655-.97 1.995-1.04 2.71-.137l2.29-2.904 1.312-1.662c.245-.31.64-.43.998-.317l1.344.317c.352.083.624.335.737.68l.838 2.986.302 1.076c.114.345.385.597.737.68l1.344.317c.358.083.753-.008.998-.317l1.312-1.662 2.29-2.904c.716-.903.855-2.444.355-3.474-.5-1.032-1.643-1.508-2.501-1.267zm-3.3 3.526l2.262-2.864c.354-.447.328-1.113-.055-1.514-.381-.403-.98-.388-1.334.06l-2.29 2.903c-.316.4-.303 1.003.046 1.372.349.37.896.397 1.257.029z"/>
</svg>

2. 将 icon 图标转换为字体文件

为了方便使用，我们需要将 icon图标 转换为 字体图标。需要借助的工具有两个，一个是 icon-font-generator 用于生成字体；一个是 svgtofont 用于将 svg 图标文件 转换为 对应 webFont 的格式。

首先安装工具：

# 安装 icon-font-generator 和 svgtofont 工具
npm install icon-font-generator svgtofont -D

在项目的根目录下新建一个icons目录，将我们准备好的icon图标存放到该目录下，然后新增文件generateIconFont.js并且编写生成字体图标的脚本：

const iconFont = require('icon-font-generator');
const svgtofont = require('svgtofont');
const fs = require('fs');

const iconsDir = './icons';

const iconFiles = fs.readdirSync(iconsDir).map(filename => iconsDir + '/' + filename);

Promise.all(iconFiles.map(svgtofont))
  .then((results) => {
    const fontBuffer = iconFont({
      files: results,
      css: true,
      fontName: 'myIconFont',
      formats: ['ttf', 'woff', 'woff2']
    });

    fs.writeFileSync( './myIconFont.ttf', fontBuffer);
    console.log('Icon font files generated: myIconFont.ttf, myIconFont.woff, myIconFont.woff2');
  }).catch(error => {
    console.log(error);
  });

其中 iconFontGenerator 和 svgtofont都是通过npm install安装的，iconFiles变量定义了我们存放svg图标的目录，并且遍历出了所使用的svg文件列表，通过Promise.all语法，将 svg 图标文件转换为对应格式的 buffer。其中 fonts 提供了所有输出的字体格式，这里格式有ttf，woff和woff2，输出的字体文件会被保存在 myIconFont.ttf, myIconFont.woff 文件中，最后console.log提示字体文件已经生成。

执行该脚本生成字体图标文件：

node generateIconFont.js

执行后会输出Icon font files generated: myIconFont.ttf, myIconFont.woff, myIconFont.woff2提示，此时我们的程序目录下会有3个字体文件（myIconFont.ttf、myIconFont.woff、myIconFont.woff2）。

3. 引入字体样式

把 生成的字体文件 文件放到相应目录中，然后在项目的样式文件中引入：

@font-face {
    font-family: 'myIconFont';
    src: url('./myIconFont.woff2') format('woff2'),
        url('./myIconFont.woff') format('woff'),
        url('./myIconFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

在Vue 项目中的 ‘App.vue’ 文件中引入字体样式：

<style>
@font-face {
  font-family: 'myIconFont';
  src: url('./myIconFont.woff2') format('woff2'),
       url('./myIconFont.woff') format('woff'),
       url('./myIconFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class ^='icon-'],
[class *=' icon-'] {
  font-family: 'myIconFont' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: '\\E800';
}
.icon-book:before {
  content: '\\e801';
}
</style>

在样式中，我们定义了字体的名字，并且定义了如何使用.icon-{iconName}来指定字体图标，对应的‘\e800’与’e801’是icons字体文件中该icon对应的编码。

4. 在Vue中使用自定义Icon

假如我们有一个组件，想要使用一些自定义Icon，那么可以这样定义：

<template>
  <div>
    <i class="icon-home"></i>
    <i class="icon-book"></i>
  </div>
</template>

同时，在顶部的style标签中，为这些自定义Icon设置样式：

.icon-home:before {
    content: '\E800';
}

.icon-book:before {
    content: '\E801';
}

这里我们假定 icon-home 和 icon-book 分别代表了我们自定义的两个Icon，content 内容需要与字体图标中设置的 Unicode Private Use Area 编码对应。

这样，我们就可以在Vue项目中引入自定义Icon了，以下是完整的vue组件代码示例：

<template>
  <div>
    <i class="icon-home"></i>
    <i class="icon-book"></i>
  </div>
</template>

<style>
@font-face {
  font-family: 'myIconFont';
  src: url('./myIconFont.woff2') format('woff2'),
       url('./myIconFont.woff') format('woff'),
       url('./myIconFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class ^='icon-'],
[class *=' icon-'] {
  font-family: 'myIconFont' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
    content: '\E800';
}

.icon-book:before {
    content: '\E801';
}
</style>

以上是自定义Icon的详细攻略，通过这篇文章，你可以学会如何在Vue项目中自定义Icon并进行引用。