1.首先在Iconfont里下载了svg文件后,放入到本地src/assets/icons下面。vue
2.我在组件中直接进行导入引用,这时候TS就报错了。TS2307找不到模块。typescript
3.爬墙搜索。shell
4.按照回答操做一下。在shims-vue.d.ts中粘贴进去。svg
declare module '*.svg' { const content:string; export default content; }
5.回去看一下引入,不报错了。ui
6.可是发现引入的是一个字符串,是svg的路径。我要引入的是SVG的使用方法。spa
7.去搜索一下你们是怎么引用的,知道目前的最流行的svg引入办法是使用Svg-sprite-loader。code
8.安装component
yarn add svg-sprite-loader -D
9.在vue.config.js中添加ip
const path = require('path') module.exports = { "lintOnSave": false, "transpileDependencies": [ "vuetify" ], config.module .rule('svg-sprite') .test(/\.svg$/) .include.add(dir).end() // 包含 icons 目录 .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end() config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}]) config.module.rule('svg').exclude.add(dir) // 其余 svg loader 排除 icons 目录 // config.module // .rule('svg-sprite') // .test(/\.(svg)(\?.*)?$/) // .include.add(dir).end() // .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({extract: false}).end() // .use('svgo-loader').loader('svgo-loader') // .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})) // .end() // config.plugin('svg-sprite').use(require('svg-sprite-loader-mod/plugin'), [{plainSprite: true}]) // config.module.rule('svg').exclude.add(dir) } }
10.这时候就能够在项目中能够使用use标签引入icon。ci
可是若是咱们项目中的Icon不少,这样引入的话就很麻烦。
let importAll = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext); try{ importAll(require.context(path:'../assets/icons',true,/\.svg$/)); }catch(error){ console.log(error); }
1.在components中新建一个Icon组件。
<template> <svg> <use :xlink:href="'#'+name"></use> </svg> </template> <script lang="ts"> const importAll = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext); try{importAll(require.context('../assets/icons',true,/\.svg$/));}catch(error){console.log(error);} export default { props:['name'], name:'Icon' }; </script>
2.让Icon能够全局使用。在main.ts中引入Icon
import Icon from '@/components/Icon.vue'; Vue.component('Icon',Icon)
3.在组件中直接使用Icon 组件便可。
name 就是你要传过去的svg的id。
这样引入就很是的方便高效了。