随着前端技术的发展，越来越多的网站开始使用图标来增强用户体验和界面美观性。在vue框架中，我们可以使用字体图标和svg图标来实现这一目的。本文将介绍使用这两种图标的方法。
一、字体图标
字体图标即将图标做成一个字体文件，通过字体的方式引用图标。字体图标有如下几个优点：
- 可以根据需要调整大小；
- 图标不会失真；
- 支持多色彩图标；
- 通过unicode来引用，便于使用。
Vue.js官方文档中预先安装好了font-awesome，我们可以直接使用这个库中的图标。
- 在组件中引入FontAwesome字体文件：（在应用内的方法，推荐）
在组件内，我们可以使用import引入字体文件。
立即学习“前端免费学习笔记（深入）”；
import 'font-awesome/css/font-awesome.min.css'
- 在模板中使用字体图标：
<i class="fa fa-address-card"></i>
fa代表font-awesome，fa-address-card代表这个图标的名称。
- 在JS中使用字体图标：
我们可以通过Icon组件把FontAwesome失去用，而不是直接使用标签。
首先，我们需要下载vue-awesome这个库，并在组件中引入。
import Icon from 'vue-awesome/components/Icon'
Vue.component('icon', Icon)```
然后，我们就可以在JS中使用字体图标了。
```<icon name="address-card" />```
``name``代表FontAwesome中该图标的名称。
二、SVG图标
SVG是一种计算机矢量图形标准，所有SVG图形都是可伸缩的。使用SVG图标的优点：
1. 缩放不会失真；
2. 着色不会失真；
3. 不需要载入一个完整的字体集合。
在Vue.js中，我们可以使用如下库来引入SVG图标：
1. SVG-Loader
首先，我们需要安装svg-loader这个库：
```npm install svg-loader --save-dev```
然后，在webpack.config.js文件的rules加入相应的Loader：
```{test: /.svg/, loader: 'svg-loader'} ```
最后，在组件中使用SVG图标：
<div>
<img src="./assets/my-svg.svg" alt="My SVG">
</div>
</template>`
- vue-svgicon
vue-svgicon是一个Vue.js插件，用于将.svg文件转换为Vue.js组件，以便于在.vue文件中直接使用SVG图标。使用vue-svgicon的步骤如下：
第一步：安装vue-svgicon
npm install vue-svgicon -D
第二步：创建SVG图标
在项目根目录的icons目录中，创建一个文件my-icon.svg。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M12 18h8v-8h8v-8h-16v16zM26 18h8v-8h-8v-8h-8v16zM4 30h8v-8h8v-8h-16v16zM18 30h8v-8h-8v-8h-8v16zM32 30h8v-8h-8v-8h-8v16z"/></svg>
第三步：生成Vue组件
在根目录创建一个.vue组件my-icon.vue，用于引用my-icon.svg：
<svg viewBox="0 0 48 48">
<use xlink:href="#my-icon" />
</svg>
</template>
<script>
import SvgIcon from 'vue-svgicon'
const req = require.context('@/icons', false, /.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
SvgIcon.register(require.context('@/icons', false, /.svg$/))
export default {
name: 'my-icon'
}
</script>```
第四步：在.vue文件中使用SVG图标
<my-icon icon-class="my-icon" class="icon"></my-icon>
</template>`
icon-class代表生成的SVG组件名称。
使用SVG-Loader和vue-svgicon都是比较方便的，在实际的工作中可以根据需要选择其中一个，在Vue.js中使用SVG图标。
总结：
本文简要介绍了在Vue框架中字体图标和SVG图标的使用方法。对于前端开发来说，图标的使用可以提高用户体验，增强应用的美观性，对于提升网站的交互性和用户体验有很多好处。使用字体图标和SVG图标是现代web开发过程中的常见方法，可以根据实际需要进行选择。
