1. Demand
Since the Icon icon provided by Ant Design Vue cannot meet the needs of the project (the demand icon is not provided), we use a custom SVG icon
2. Technology stack
- Front-end framework: vue2 + Vue Cli
- Front-end UI framework: Ant Design of Vue (v1.7.8)
3. Method 1
- vue-svg-loader
- This is the usage of Ant Design Vue official website
install dependencies
npm i -D vue-svg-loader vue-template-compiler
# 或
yarn add --dev vue-svg-loader vue-template-compiler
The dependency version I use:
[email protected]
[email protected]
Configure vue.config.js
// vue.config.js
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule.use('vue-svg-loader').loader('vue-svg-loader');
},
};
icon usage
<template>
<div>
<a-icon :component="bxAnaalyse" />
</div>
</template>
<script>
// 引入svg代码文件
import bxAnaalyse from '@/assets/icons/bx-analyse.svg';
export default {
data() {
return {
bxAnaalyse,
};
},
}
</script>
<style></style>
4. Method 2
- vue-svg-icon-loader
- vue-svg-component-runtime
install dependencies
npm install --save-dev vue-svg-icon-loader
npm install vue-svg-component-runtime
The dependency version I use:
[email protected]
[email protected]
Configure vue.config.js
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.oneOf('inline')
.resourceQuery(/inline/)
.use('vue-svg-icon-loader')
.loader('vue-svg-icon-loader')
.end()
.end()
.oneOf('external')
.use('file-loader')
.loader('file-loader')
.options({
name: 'assets/[name].[hash:8].[ext]'
})
},
}
svg icon definition
Create a new folder under assetsthe directory iconsto store svgthe files
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1551058675966" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7872" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M85.333333 512h85.333334a340.736 340.736 0 0 1 99.712-241.621333 337.493333 337.493333 0 0 1 108.458666-72.96 346.453333 346.453333 0 0 1 261.546667-1.749334A106.154667 106.154667 0 0 0 746.666667 298.666667C805.802667 298.666667 853.333333 251.136 853.333333 192S805.802667 85.333333 746.666667 85.333333c-29.397333 0-55.978667 11.776-75.221334 30.933334-103.722667-41.514667-222.848-40.874667-325.76 2.517333a423.594667 423.594667 0 0 0-135.68 91.264 423.253333 423.253333 0 0 0-91.306666 135.637333A426.88 426.88 0 0 0 85.333333 512z m741.248 133.205333c-17.109333 40.618667-41.685333 77.141333-72.96 108.416s-67.797333 55.850667-108.458666 72.96a346.453333 346.453333 0 0 1-261.546667 1.749334A106.154667 106.154667 0 0 0 277.333333 725.333333C218.197333 725.333333 170.666667 772.864 170.666667 832S218.197333 938.666667 277.333333 938.666667c29.397333 0 55.978667-11.776 75.221334-30.933334A425.173333 425.173333 0 0 0 512 938.666667a425.941333 425.941333 0 0 0 393.258667-260.352A426.325333 426.325333 0 0 0 938.666667 512h-85.333334a341.034667 341.034667 0 0 1-26.752 133.205333z" p-id="7873"></path><path d="M512 318.378667c-106.752 0-193.621333 86.869333-193.621333 193.621333S405.248 705.621333 512 705.621333s193.621333-86.869333 193.621333-193.621333S618.752 318.378667 512 318.378667z m0 301.909333c-59.690667 0-108.288-48.597333-108.288-108.288S452.309333 403.712 512 403.712s108.288 48.597333 108.288 108.288-48.597333 108.288-108.288 108.288z" p-id="7874"></path></svg>
Uniform loading
Create new icons.js, uniformly load all custom icons for easy management
// icons.js
/**
* 自定义图标加载表
* 所有图标均从这里加载，方便管理
*/
// https://www.webpackjs.com/configuration/module#ruleresourcequery
// ?inline 与webpack的resourceQuery 有关，删除会报错
import bxAnaalyse from '@/assets/icons/bx-analyse.svg?inline' // path to your '*.svg?inline' file.
export {
bxAnaalyse }
Rule.resourceQuery
Rule.resourceQueryIswebpacka configuration item in , which is used to specify the resource type of the module.- Its function is
webpackto process qualified modules according to the specified resource type during compilation. - For example, we can use
Rule.resourceQueryto specify to process files ending with a specific suffix, or to process specific types of files. - In this way,
webpackonly the modules that need to be processed can be processed during compilation, improving compilation efficiency
// 如果不想使用Rule.resourceQuery, 将代码做如下修改即可
import bxAnaalyse from '@/assets/icons/bx-analyse.svg'
export {
bxAnaalyse }
// vue.config.js中删除.resourceQuery(/inline/)
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.oneOf('inline')
.use('vue-svg-icon-loader')
.loader('vue-svg-icon-loader')
.end()
.end()
.oneOf('external')
.use('file-loader')
.loader('file-loader')
.options({
name: 'assets/[name].[hash:8].[ext]'
})
},
}
icon usage
usage one
<template>
<div>
<a-icon :component="bxAnaalyse" />
<a-button type="primary" >
<a-icon :component="bxAnaalyse" />我是按钮
</a-button>
</div>
</template>
<script>
import {
bxAnaalyse } from '@/core/icons.js'
export default {
data() {
return {
bxAnaalyse,
};
},
}
</script>
<style></style>
usage two
<template>
<div>
<bxAnaalyse class="icon"></bxAnaalyse>
</div>
</template>
<script>
import {
bxAnaalyse } from '@/core/icons.js'
export default {
components: {
bxAnaalyse,
},
}
</script>
<style>
.icon {
width: 1em;
height: 1em;
}
</style>
the difference
The unit of usage 1 is em, and the unit of usage 2 is Number, so if you want the display effect of usage 1 and usage 2 to be the same, you need to manually set the width and height for usage 2 to1em
problems encountered
solution
- Check
svgif the import path of the icon is correct - Check
vue.config.jsif the configuration is correct - Check if it
vue.config.jsis configured in.resourceQuery(/inline/), butimportit is not added in the path?inline
Directory Structure
5. Method 3
-
svg-sprite-loader