一、SVG-Sprite组件
svg-sprite 的好处:
页面代码清爽
可使用ID随处重复调用
每个SVG图标都可以更改大小颜色
https://npm.taobao.org/package/svg-sprite-loader
二、组件安装
npm install svg-sprite-loader --save-dev
npm install svg-sprite-loader -D
三、修改配置
修改配置webpack中webpack.base.conf.js
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'//去掉svg这个图片加载不出来
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
//这个不处理svg图片，因为我们独立拆开让svg-sprite-loader来处理了
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
添加配置
四、创建svg组件
在components目录下：
创建svg的组件
<template>
<svg :class="svgClass" aria-hidden="true">
<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>
组件是全局通用的，所以要在项目加载的第一时间把它注册到全局Vue中去，在入口文件main.js中设置。
四、创建icons文件夹存放svg的图标
在src目录下创建icons文件夹。
创建icons文件夹
图标文件
icons/index.js内容：
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
#
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
五、在main.js中引入
//引入整个icons,
import './icons'
六、在模板中使用
<svg-icon icon-class="documentation" class="test"/>
显示
七、svg在vue-cli3中的配置
- 在vue.config.js中配置webpack：
const path = require("path");
function resolve(dir) {
return path.join(__dirname, ".", dir);
}
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
outputDir: "dist",
assetsDir: "static",
indexPath: "index.html",
devServer: {
overlay: {
warnings: false,
errors: false
},
// 设置主机地址
host: "localhost",
// 设置默认端口
port: 8080,
// 设置代理
proxy: {
"/api": {
// 目标 API 地址
target: "http://localhost:8000/", // 接口的域名
// 如果要代理 websockets
ws: false,
// 将主机标头的原点更改为目标URL
changeOrigin: true, // 跨域
pathRewrite: {
"^/api": "/"
}
}
}
},
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// svg是个基础loader
// const svgRule = config.module.rule('svg')
svgRule.uses.clear(); // 如果删除将和MarkDown冲突
svgRule
.test([/\.svg$/, /\.scss$/])
.include.add(resolve("src/icons")) // 处理svg目录
.end()
.use(["svg-sprite-loader", "css-loader", "sass-loader"]) //
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
});
// 必须配置
const fileRule = config.module.rule('file');
fileRule.uses.clear();
fileRule
.test(/\.svg$/)
.exclude.add(path.resolve(__dirname, './src/icons/svg'))
.end()
.use('file-loader')
.loader('file-loader');
},
configureWebpack: () => ({})
};
-
添加图标文件
在src目录下创建icons文件夹。
icons文件夹 添加组件
在src\components目录中创建文件：
SvgIcon\index.vue
<template>
<svg :class="svgClass" aria-hidden="true">
<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>
- 图标目录icons中创建文件index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
- main.js引入组件
// 导入图标
import '@/icons/index.js'
- 图标使用
<svg-icon icon-class="user" />
显示结果
