引言:最近開始寫vue的項目,借鑑了一下vue-element-admin源碼,針對vue有一個關於icon圖標的處理,最近也找了不少關於vue的icon處理的解決方案,大部分都是按照以前小程序的方式直接引入iconfont項目,而後在外面封裝調用樣式就能夠了。css
文檔中推薦的方式是引入svghtml
能夠動態地使得圖標可訪問vue
注:文檔中關於svg的介紹webpack
這裏準備採用文檔中推薦的插件svg-sprite-loader進行介紹css3
注: 用來根據導入的svg文件自動生成symbol標籤並插入html,接下來就能夠在模板忠方便地使用svg-sprite技術了web
每一個SVG圖標均可以更改大小顏色npm
注:張鑫旭大神的介紹-SVG Sprite技術介紹element-ui
npm install svg-sprite-loader --save
在webpack.base.conf.js加入處理svg的loader小程序
{ test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId: 'icon-[name]' } }
這個配置默認導入src文件下的icons文件
src/icons/index
segmentfault
// requires and returns all modules that match const requireAll = requireContext => requireContext.keys().map(requireContext); // import all svg const req = require.context('./assets/svg', true, /\.svg$/); requireAll(req);
而後運行
npm run dev
報錯了,此時咱們看咱們的webpack配置
{ test: /\.svg$/, loader: 'svg-sprite-loader', include: path.resolve(__dirname, '../src/assets/icons') }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } },
下面url-loader中也處理了svg文件,刪掉svg處理以後就顯示咱們須要的svg了,可是以前的url是咱們element-ui裏生成的,須要加上symbol,不去處理src/assets/svgs路徑下的svg文件
{ test: /\.svg$/, loader: 'svg-sprite-loader', include: path.resolve(__dirname, '../src/assets/icons') }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', exclude: [ path.resolve(__dirname, '../src/assets/icons'), ], options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } },
注:require.context,webpack管理依賴
<svg> <use xlink:href="#jisuan" /> </svg>
import '@/assets/icons/jisuan.svg'
固然,這並非最後想要的結果,咱們須要將每一個svg文件整合起來組件化,這樣方便之後的調用
創建一個Icon.vue文件
<template> <svg> <use :xlink:href="`#${name}`"></use> </svg> </template> <script> export default { name: 'icon', props: { name: { type: String, required: true, }, }, } </script>
<icon name="jisuan" /> import '@/assets/icons/jisuan.svg'
這裏插入每一個svg圖標都須要import,在咱們平時寫項目的時候js,vue文件都已經實現了自動導入,這裏照葫蘆畫瓢,讓src/assets/svg裏的文件自動導入
assets/icon/scan.js
const requireAll = requireContext => requireContext.keys().map(requireContext); // import all svg const req = require.context('./assets/svg', true, /\.svg$/); requireAll(req);
main.js
import './assets/scan.js'
參考文檔: