引言：最近開始寫vue的項目，借鑒了一下vue-element-admin源碼，針對vue有一個關(guān)于icon圖標(biāo)的處理，最近也找了很多關(guān)于vue的icon處理的解決方案，大部分都是按照之前小程序的方式直接引入iconfont項目，然后在外面封裝調(diào)用樣式就可以了。

• 按照平時導(dǎo)入icon的方法的話有一些已知的缺點

操作繁瑣，每次ui需要加一些新的圖標(biāo)的時候，都要重新下載圖標(biāo)庫的項目，然后把整體的文件（其中包括css,svg,ttf,woff等）替換掉。

如果更改名稱的話，需要在圖標(biāo)庫里改一次，然后進(jìn)行下載復(fù)制拷貝。

iconfont網(wǎng)站庫圖標(biāo)內(nèi)容有限，特殊業(yè)務(wù)條件需要uimm們自己設(shè)計的圖(PSD小圖標(biāo)變身SVG Sprites/font-face歷險記)

• 文檔中推薦的方式是引入svg

  使用svg的優(yōu)點

---

圖標(biāo)易于實時修改

圖標(biāo)可以帶動畫

可以使用標(biāo)磚的prop和默認(rèn)值來將圖標(biāo)保持在一個典型的尺寸并隨時按需改變他們

圖標(biāo)是內(nèi)聯(lián)的，所以不需要額外的HTTP請求

可以動態(tài)地使得圖標(biāo)可訪問

　注：文檔中關(guān)于svg的介紹

• 這里準(zhǔn)備采用文檔中推薦的插件svg-sprite-loader進(jìn)行介紹

  注：　用來根據(jù)導(dǎo)入的svg文件自動生成symbol標(biāo)簽并插入html，接下來就可以在模板忠方便地使用svg-sprite技術(shù)了

  使用svg-sprite的好處

---

頁面代碼清爽

可使用ID隨處重復(fù)調(diào)用

每個SVG圖標(biāo)都可以更改大小顏色

注：張鑫旭大神的介紹-SVG Sprite技術(shù)介紹

安裝插件

npm install svg-sprite-loader --save

webpack配置

在webpack.base.conf.js加入處理svg的loader

{test: /\.svg$/,loader: 'svg-sprite-loader',include: [resolve('src/icons')],options: {symbolId: 'icon-[name]'}}

這個配置默認(rèn)導(dǎo)入src文件下的icons文件
src/icons/index

// requires and returns all modules that matchconst 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'

組件化

---

當(dāng)然，這并不是最后想要的結(jié)果，我們需要將每個svg文件整合起來組件化，這樣方便以后的調(diào)用

建立一個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'

自動導(dǎo)入

---

這里插入每個svg圖標(biāo)都需要import，在我們平時寫項目的時候js，vue文件都已經(jīng)實現(xiàn)了自動導(dǎo)入，這里照葫蘆畫瓢，讓src/assets/svg里的文件自動導(dǎo)入

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'

參考文檔:

• https://segmentfault.com/a/1190000015367490
• https://cisy.me/webpack-svg-sprite/

轉(zhuǎn)載于:https://www.cnblogs.com/teemor/p/9565841.html

總結(jié)

以上是生活随笔為你收集整理的【vue】webpack插件svg-sprite-loader---实现自己的icon组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。