点击【 Font class 】- 【 下载至本地 】，解压之后导入到项目【/src/assets/icon】，这个是【iconfont.css】文件。
@font-face {
font-family: "iconfont"; /* Project id 3262995 */
src: url('iconfont.woff2?t=1647910536684') format('woff2'),
url('iconfont.woff?t=1647910536684') format('woff'),
url('iconfont.ttf?t=1647910536684') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-gouwuche-:before {
content: "\e60b";
}
.icon-zhiwu:before {
content: "\e600";
}
.icon-bianji:before {
content: "\100ab";
}
然后在main.js中导入
import '@/assets/icon/iconfont.css'
在用图标的组件中直接使用就好了（class名 就是css中的样式类名）
<span class="iconfont icon-zhiwu"></span>
<span class="iconfont icon-bianji"></span>
<span class="iconfont con-gouwuche-"></span>
点击【 Symbol 】- 【 下载至本地 】，解压之后导入到项目【/src/assets/iconfont】 目录下。
在main.js中引用
// symbol 引用
import '@/assets/iconfont/iconfont.js'
import '@/assets/iconfont/iconfont.css'
//设置全局icon样式
import '@/assets/iconGloble.css'
也可以对icon对图标进行基础设置，比如图标的宽高等。创建【/src/assets/iconGloble.css】文件
.icon{
width:5em;
height:5em;
vertical-align:-0.15em;
fill:currentColor;
overflow:hidden;
}
在用图标的组件中使用。
注意：
class="icon"这个【icon】类名是设置图标的基础样式css样式类名。xlink:href="#icon-zhiwu" 就是css中的样式类名，但是#必需要加 <svg
class="icon"
aria-hidden="true"
>
<use xlink:href="#icon-zhiwu"></use>
</svg>
两种方式，其实都差不多。首先在【assets/iconfont/iconfont.css】中将你要追加的图标css样式加入，或者整个css文件的内容直接替换。点击【点此复制代码】后会在网页上打开一个新窗口，里面都是css样式
同样【assets/iconfont/iconfont.js】文件也是同样处理。点击【点此复制代码】
需求：
安装svg-sprite-loader插件
命令：根据需要二选一即可。
// 方式一：npm
npm install svg-sprite-loader
// 方式二：yarn
yarn add svg-sprite-loader
webpack 配置：（webpack.base.conf.js）或者在vue.config.js文件内配置。这里是vue.config.js。在项目项目根目录下创建vue.config.js文件（chainWebpack位置开始）
const path = require('path')
function resolve(dir) {
return path.join(__dirname, './', dir)
}
module.exports = {
// 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
publicPath: './',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
integrity: false,
// webpack相关配置
chainWebpack: config => {
// svg rule loader
const svgRule = config.module.rule('svg') // 找到svg-loader
svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
svgRule // 添加svg新的loader处理
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
// 修改images loader 添加svg处理
const imagesRule = config.module.rule('images')
//将 icons 文件夹排除, 不让 url-loader 处理该文件夹
imagesRule.exclude.add(resolve('src/assets/icons'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
}
}
点击【SVG下载】存储到【src/assets/icons/svg/】目录下，名为【bianji.svg】
在【src/assets/icons】目录下创建index.js文件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
Vue.component('svg-icon',SvgIcon)
// 定义一个加载目录的函数
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
// 加载目录下的所有 svg 文件
requireAll(req)
在main.js文件中引入
import '@/assets/icons'
创建【components/SvgIcon/SvgIcon.vue】组件。图标的大小可以在此文件的css样式【.svg-icon】中进行设置。
<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>
在需要使用的组件中直接使用。这里的icon-class="bianji" 的图标名就是svg的名字。
<svg-icon icon-class="bianji"></svg-icon>
在【components/SvgIcon/SvgIcon.vue】组件中添加一组props对象【styleObject】来根据需要自定义图标大小和颜色。
注意：【:style=“styleObjectSet”】这个字段是必需的，在其他组件内不引用时分为两种情况，需要自定义和不需要（默认）
style-object=""。<svg-icon style-object="" icon-class="logo" ></svg-icon>
<template>
<svg-icon icon-class="ma" :style-object="styleObject"></svg-icon>
</template>
<script>
export default {
data () {
return {
styleObject: {
width: '15em',
height: '15em',
fill: 'red',
}
};
},
</script>
components/SvgIcon/SvgIcon.vue
<template>
<svg
:class="svgClass"
:style="styleObjectSet"
aria-hidden="true"
>
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: "SvgIcon",
props: {
iconClass: {
type: String,
required: true,
},
className: {
type: String,
default: "",
},
styleObject: {
fill: {
type: String,
default: "currentColor",
},
width: {
default: '5em',
},
height: {
default: '5em',
}
}
},
computed: {
iconName () {
return `#icon-${this.iconClass}`;
},
svgClass () {
if (this.className) {
return "svg-icon " + this.className;
} else {
return "svg-icon";
}
},
styleObjectSet () {
const { width, height, fill } = this.styleObject
return `width:${width};height:${height};fill:${fill}`
}
},
};
</script>
<style scoped>
.svg-icon {
width: 3em;
height: 3em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>