vue如何引入svg vue如何引入svg图片

文章摘要：vue如何引入svg vue如何引入svg图片

在vue中引入svg的方法：1.新建vue.js项目；2.使用npm命令安装svg依赖；3.配置config文 […]

在vue中引入svg的方法：1.新建vue.js项目；2.使用npm命令安装svg依赖；3.配置config文件；4.使用import方法导入svg组件；

具体步骤如下：

1.首先，在vue-cli中创建一个vue.js项目；

vue create project-name

2.vue.js项目创建好后，在项目中使用npm命令安装svg依赖；

npm install svg-sprite-loader --save-dev

3.svg依赖安装安装好后，在config配置文件中进行以下配置；

const path = require('path');　　

　　function resolve(dir) {

　　　　return path.join(__dirname, dir)

　　}

chainWebpack(config) {

config.module

.rule('svg')

.exclude.add(resolve('src/icons'))

.end()

config.module

.rule('icons')

.test(/.svg$/)

.include.add(resolve('src/icons'))

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({

symbolId: 'icon-[name]'

})

.end()

}

4.最后，config文件配置好后，在项目中使用import方法导入svg组件即可；

import SvgIcon from '@/components/SvgIcon'