怎麼在VUE中引入iconfont圖示
阿新 • • 發佈：2020-08-24
背景
自己看著自己之前的方引入圖示的方法.看著有些疑惑.
於是,自己整理了下引入的流程.以免再次疑惑.如果你正好在網上查詢如何在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>