vue cli3 手把手教學(xué)封裝Svgicon組件

第一步:在src文件下新建一個(gè)放置svg文件的文件夾

第二步:在components文件下新建一個(gè)Svg組件

這是一個(gè) 文件夾 專門用來(lái)存放項(xiàng)目里面需要使用的svg文件，比如 a.svg b.svg …

svg組件源碼

<template> <svg : aria-hidden='true'> <use :xlink:href='http://www.gepszalag.com/bcjs/iconName'></use> </svg></template><script type='text/ecmascript-6'>/* icon組件實(shí)現(xiàn)自動(dòng)引入 ../../Icons/svg 下面所有的圖標(biāo)了*之后我們就要使用到 webpack 的 require.context。很多人對(duì)于 require.context可能比較陌生，直白的解釋就是require.context('./test', false, /.test.js$/); 這行代碼就會(huì)去 test 文件夾（不包含子目錄）下面的找所有文件名以 .test.js 結(jié)尾的文件能被 require 的文件。 更直白的說(shuō)就是 我們可以通過(guò)正則匹配引入相應(yīng)的文件模塊*/const requireAll = requireContext => requireContext.keys().map(requireContext)const req = require.context(’../../Icons/svg’, false, /.svg$/)requireAll(req)export default { name: ’Svgicon’, props: { iconClass: { type: String, required: true }, className: { type: String } }, computed: { iconName () { return `#icon-${this.iconClass}` }, svgClass () { if (this.className) { return ’svg-icon ’ + this.className } else { return ’svg-icon’ } } }}</script><style>.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }</style>

第三步:配置vue.config.js

chainWebpack: config => { const svgRule = config.module.rule(’svg’) svgRule.uses.clear() svgRule .use(’svg-sprite-loader’) .loader(’svg-sprite-loader’) .options({ symbolId: ’icon-[name]’ })}

以上就配置完畢

注:未注冊(cè)組件在人口文件全局注冊(cè)即可使用(main.js)

到此這篇關(guān)于淺析vue cli3 封裝Svgicon組件正確姿勢(shì)(推薦)的文章就介紹到這了,更多相關(guān)vue cli3 Svgicon組件內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！