vue复用|vue项目中使用svg格式图片基本使用，手把手教学！会复制就行！！ vue.js|html5|前端|vue|vue

创建vue-cli2.0略过
一、下载svg包

npm i svg-sprite-loader@4.1.3

二、配置vue-config.js文件
vue-config.js没有就自己创一个放在项目根目录哦

'use strict' const path = require('path')function resolve(dir) { return path.join(__dirname, dir) }module.exports = { chainWebpack (config) { // when there are many pages, it will cause too many meaningless requests config.plugins.delete('prefetch') // set svg-sprite-loader 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() } }

三、创建文件
（1）在src/icons目录下创建

src/icons /svg# 保存图标 /index.js# 注册全局组件

svg目录下

文章图片

index.js

import Vue from 'vue' import SvgIcon from '@/components/SvgIcon'// svg component// register globally Vue.component('svg-icon', SvgIcon)// 进行导入所有的svg格式如果手动引入需要依次引入 const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().map(requireContext) requireAll(req)

（2）创建组件

src/componets/SvgIcon/index.vue

SvgIcon/index.vue

.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }.svg-external-icon { background-color: currentColor; mask-size: cover!important; display: inline-block; }

（3）src/utils/validate.js