如何封裝svg圖標(biāo)組件

封裝svg圖標(biāo)組件的方法有很多種，如果只是單純的想使用svg圖標(biāo)，可以將svg導(dǎo)出fonts字體圖標(biāo)使用，但這樣做會失去svg原有的樣式與尺寸，也可以當(dāng)成img圖片或者背景引入，但這樣做非常繁瑣。

最近項(xiàng)目中需要用大量的svg圖標(biāo)，這里介紹一種通過vue組件使用svg圖標(biāo)的方式：

首先了解一下svg圖標(biāo)的use元素。

<svg><defs><g id="shape"><rect x="0" y="0" width="50" height="50" /><circle cx="0" cy="0" r="50" /></g></defs><use xlink:href="#shape" x="50" y="50" /><use xlink:href="#shape" x="200" y="50" /> </svg> 復(fù)制代碼

比如我繪制了一個id為shape的svg元素，當(dāng)我想復(fù)用時，不可能再復(fù)制粘貼一遍代碼，這時借助use元素，讓xlink:href指定為#shape，它會去尋找并克隆對應(yīng)的svg元素，從而實(shí)現(xiàn)復(fù)用。

use元素方便的是，只要同處于一個文檔中，use都可以引用到，它可以重用單個元素，也可以重用一組<g>或者<symbol>元素，只需要通過id選擇器進(jìn)行標(biāo)時引用即可。

具體的想要了解use克隆的內(nèi)容放在了哪里，以及svg更底層的內(nèi)容，可參考：用CSS給SVG 的內(nèi)容添加樣式

封裝vue組件

首先，將UI提供的需要使用的svg文件統(tǒng)一放在一個文件夾內(nèi)：

├── src├── svg├── user.svg└── course.svg 復(fù)制代碼

開發(fā)vue組件：

// svg-icon.vue <template><svg :class="svgClass" aria-hidden="true" v-on="$listeners"><use :xlink:href="iconName"></use></svg> </template><script> import './icons';export default {name: 'SvgIcon',props: {// svg圖標(biāo)名稱name: {default: ''},// 自定義樣式className: {type: String,default: ''}},computed: {iconName() {return `#icon-${this.name}`;},svgClass() {return ['svg-icon',this.className ? this.className:'']}} }; </script><style scoped> .svg-icon {vertical-align: -0.15em;fill: currentColor;overflow: hidden; } </style> 復(fù)制代碼

我們期望使用svg-icon組件來統(tǒng)一使用所有的svg文件，通過指定name來變更對應(yīng)的svg文件。

想要使用svg文件的話，還需要將所有svg文件統(tǒng)一加載到內(nèi)存當(dāng)中，可以使用import 'svg/user.svg'這種方式一個一個引用，這里借助require.context一次性引入所有svg文件。

// icons.jsconst req = require.context('@svg', false, /\.svg$/); const requireAll = requireContext => requireContext.keys().map(requireContext); requireAll(req); 復(fù)制代碼

這個時候，還不能通過svg-icon組件指定name的方式來引用兌用svg文件。我們還需要將每個svg文件進(jìn)一步處理，將他們文件內(nèi)容的icon封裝進(jìn)symbol元素中，達(dá)到下面的使用效果：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol class="icon" viewBox="0 0 970 740" id="icon-user">...</symbol> </svg> 復(fù)制代碼

這里可以借助webpack插件：svg-sprite-loader

改造項(xiàng)目的webpack配置

由于項(xiàng)目是基于vue-cli3定制的，所以這里只介紹一下如何在vue-cli3中配置svg-sprite-loader。

代碼如下：

module.exports = {...chainWebpack: config => {...config.module.rule('svg').exclude.add(resolve('src/svg')).end();config.module.rule('svgs-loader').test(/\.svg$/).include.add(resolve('src/svg')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end();} } 復(fù)制代碼

這里要注意一下，配置svg-sprite-loader之前，要先替換vue-cli3本身的file-loader規(guī)則，該loader會把svg同圖片資源一樣單獨(dú)輸出出來，這里配置file-loader忽略svg下面所有的svg文件即可。

最后，在vue中就可以通過svg-icon組件來使用對應(yīng)的svg圖標(biāo)了。

相關(guān)文章

• 未來必?zé)?#xff1a;SVG Sprite技術(shù)介紹
• 用CSS給SVG 的內(nèi)容添加樣式

如文章內(nèi)容出現(xiàn)錯誤，敬請諒解，希望可以不吝賜教。

轉(zhuǎn)載請注明出處

轉(zhuǎn)載于:https://juejin.im/post/5cf79b8c518825382565ba19

總結(jié)

以上是生活随笔為你收集整理的封装svg组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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