怎么在VUE中引入iconfont图标
背景
自己看着自己之前的方引入图标的方法.看着有些疑惑.
于是,自己整理了下引入的流程.以免再次疑惑.如果你正好在网上查找如何在VUE中引入iconFont图标.那么这篇文章也许对你有用.
- 本文章引入的环境是在使用vue-cli构建的项目下进行的.
- 引入图标的格式是Symbol.
- 图标是下载到本地之后进行引用的.
流程
1.把从图标库下载到本地的图标解压.并且在vue所在工程中的src文件路径下新建一个asstes的文件夹.把下载并解压的文件全都放置在此文件夹下.(解压的文件有些是示例文件.不对图标产生影响)
2.在vue工程文件夹中的main.js中引入iconfont.js文件
import Vue from 'vue'
import App from './App'
import router from './router'
import '@/assets/iconfont.js'; // 这行代码
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.在index.html中写入样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue</title>
<style>
/*在这里*/
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4.配置完毕.现在就可以在html代码中引入symbol图标.
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-clientservice" />
</svg>
