vue项目中icon乱码的问题及解决

这是一篇困扰Vue项目开发者的问题：在使用Vue框架时，有时候会出现icon图标乱码的问题，这给开发带来很大困扰。本篇攻略将会详细讲解这种问题的原因以及解决方法，同时还会提供两个示例来协助理解。

问题原因

造成Vue项目中icon图标乱码的原因一般有两个：

1. 计算机中没有安装相关的字体文件。
2. Vue cli将svg图标转成symbol后，symbol的id值和字体的unicode不对应。

解决方法

方法1：安装字体文件

如果计算机中没有安装相关的字体文件会导致这种问题。解决方法非常简单，只需要将该字体文件下载到本地，然后将其导入到Vue项目中即可。

1. 首先，在计算机中搜索需要的字体文件（如fontawesome-webfont.ttf）并下载到本地；
2. 接下来，在Vue项目的public目录下新建一个fonts文件夹，并将字体文件放在该目录下。
3. 在项目中引入该字体文件，在main.js中添加如下代码：

import './public/font-awesome/css/font-awesome.min.css';

1. 最后，在使用该字体文件的组件中使用font-family指定字体名称即可。

示例代码：

<i class="fa fa-camera-retro" aria-hidden="true"></i>

该示例使用了FontAwesome字体文件，将其安装到项目中并在组件中使用该字体即可。

方法2：使用svg-sprite-loader

当我们使用Vue cli将svg图标转成symbol后，可能会出现symbol的id值和字体的unicode不对应的问题，同时还可能会出现多个symbol的id值相同的情况。这个问题可以通过使用svg-sprite-loader解决。

1. 首先，安装svg-sprite-loader：

npm i svg-sprite-loader -D

1. 在vue.config.js中添加如下代码：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/svg-icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/svg-icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

配置完成后，svg图标就会转成symbol使用。

示例代码：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-camera-retro"></use>
</svg>

这里我们使用的是icon-camera-retro作为symbol的id值，因此我们在组件中使用该id值来引用图标即可。

结语

本文详细讲解了Vue项目中icon图标乱码的问题及解决方法，并提供了两个实例来协助理解。希望对你有所帮助。