一、SVG-Sprite組件
svg-sprite 的好處:
頁(yè)面代碼清爽
可使用ID隨處重復(fù)調(diào)用
每個(gè)SVG圖標(biāo)都可以更改大小顏色
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這個(gè)圖片加載不出來(lái)
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
//這個(gè)不處理svg圖片，因?yàn)槲覀儶?dú)立拆開(kāi)讓svg-sprite-loader來(lái)處理了
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
添加配置
四、創(chuàng)建svg組件
在components目錄下：
創(chuàng)建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>
組件是全局通用的，所以要在項(xiàng)目加載的第一時(shí)間把它注冊(cè)到全局Vue中去，在入口文件main.js中設(shè)置。
四、創(chuàng)建icons文件夾存放svg的圖標(biāo)
在src目錄下創(chuàng)建icons文件夾。
創(chuàng)建icons文件夾
圖標(biāo)文件
icons/index.js內(nèi)容：
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中引入
//引入整個(gè)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
},
// 設(shè)置主機(jī)地址
host: "localhost",
// 設(shè)置默認(rèn)端口
port: 8080,
// 設(shè)置代理
proxy: {
"/api": {
// 目標(biāo) API 地址
target: "http://localhost:8000/", // 接口的域名
// 如果要代理 websockets
ws: false,
// 將主機(jī)標(biāo)頭的原點(diǎn)更改為目標(biāo)URL
changeOrigin: true, // 跨域
pathRewrite: {
"^/api": "/"
}
}
}
},
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// svg是個(gè)基礎(chǔ)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: () => ({})
};
-
添加圖標(biāo)文件
在src目錄下創(chuàng)建icons文件夾。
icons文件夾 添加組件
在src\components目錄中創(chuàng)建文件：
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>
- 圖標(biāo)目錄icons中創(chuàng)建文件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引入組件
// 導(dǎo)入圖標(biāo)
import '@/icons/index.js'
- 圖標(biāo)使用
<svg-icon icon-class="user" />
顯示結(jié)果
