背景
自己看着自己之前的方引入圖標的方法.看着有些疑惑.
於是,自己整理了下引入的流程.以免再次疑惑.如果你正好在網上查找如何在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>