>[danger]在vue中使用svg渲染圖標 [直接下載代碼]([https://github.com/lidongxuwork126com/ldx\_vue/tree/master/Vue%E4%BD%BF%E7%94%A8svg%E5%9B%BE%E6%A0%87](https://github.com/lidongxuwork126com/ldx_vue/tree/master/Vue%E4%BD%BF%E7%94%A8svg%E5%9B%BE%E6%A0%87)) 1. 項目中下載svg加載精靈插件 `$ npm i svg-sprite-loader -save-dev` 2. 在webpack.base.conf.js中`新加入`配置module的rules ~~~ { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId: 'icon-[name]' } }, ~~~ > 解析src/icons文件夾中的.svg文件 3. 修改module下rules配置, 加入`exclude: [resolve('src/icons')]` ~~~ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', exclude: [resolve('src/icons')], options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ~~~ > 不要讓url-loader解析src/icons內的.svg文件, 否則服務器跑不起來 4. 在src下, 新建如下結構  (1) svg文件夾下放.svg文件 (2) index.js代碼如下: ~~~ import Vue from 'vue' // 展示svg圖標的, svg組件 import SvgIcon from '@/components/SvgIcon' // 全局注冊svg-icon組件 Vue.component('svg-icon', SvgIcon); // require.context(); 一次性引入 // 1.你要引入文件的目錄 // 2.是否要查找該目錄下的子級目錄 // 3.匹配要引入的文件 const req = require.context('./svg', false, /\.svg$/); // 加載每個.svg文件到內存中 const requireAll = requireContext => { // requireContext.keys() 得到數組['./look.svg', './more.svg', './voice.svg'] requireContext.keys().map(requireContext) }; requireAll(req); ~~~ 5. 聲明SvgIcon.vue組件, 代碼如下 ~~~ <!--專門加載字體圖標的組件--> <template> <!--$listeners是vue2.4新出, 相當于繼承父標簽的所有事件, .native事件不可用--> <!--svg標簽: 繪制矢量圖的 HTML5 標簽--> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <!--use標簽: 配合svg標簽使用, 呈現視圖, href指向繪制信息(路徑大小等)--> <use :xlink:href="iconName"/> </svg> </template> <script> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName() { return `#icon-${this.iconClass}` }, svgClass() { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } } } </script> <style scoped> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> ~~~ 6. 在main.js注入icons配置 `import "@/icons"` >[danger]使用 ~~~ <svg-icon :iconClass="'voice'"></svg-icon> ~~~ > 使用voice.svg圖標 ---- 擴展: 可以自定義樣式, 注意最好給font-size ~~~ <svg-icon :iconClass="'voice'" :className="'voice_class'"></svg-icon> <style> .voice_class{ font-size: 5rem; } </style> ~~~ >[danger]報錯解決 1. 問題: require function is used in a way in which dependencies cannot be statically extracted(require函數不能以靜態提取依賴關系) 解決: webpack.base.conf.js中module中加入 `unknownContextCritical : false`