vue cli3 手把手教學封裝Svgicon組件

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

第二步:在components文件下新建一個Svg組件

這是一個 文件夾 專門用來存放項目里面需要使用的svg文件，比如 a.svg b.svg …

svg組件源碼

<template> <svg : aria-hidden='true'> <use :xlink:href='http://www.baoyu77737.com/bcjs/iconName'></use> </svg></template><script type='text/ecmascript-6'>/* icon組件實現自動引入 ../../Icons/svg 下面所有的圖標了*之后我們就要使用到 webpack 的 require.context。很多人對于 require.context可能比較陌生，直白的解釋就是require.context('./test', false, /.test.js$/); 這行代碼就會去 test 文件夾（不包含子目錄）下面的找所有文件名以 .test.js 結尾的文件能被 require 的文件。 更直白的說就是 我們可以通過正則匹配引入相應的文件模塊*/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]’ })}

以上就配置完畢

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

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