您现在的位置是:首页 > Javascript
当前栏目
vue项目引入svg图标(完整步骤)
2023-03-31 10:38:54 时间
1. 安装svg依赖
在vue中首先需要安装可以加载svg的依赖。
npm安装:npm install svg-sprite-loader --save-dev
2. 创建svg文件夹存放svg图标
创建icons文件夹,在icons文件夹下创建svg文件夹存放本地svg图标。
3. vue.config.js 中配置svg图片
vue.config.js代码:
const path = require('path')
module.exports = {
chainWebpack:config=>{
// svg图标加载
config.module
.rule('svg')
.exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
.end()
config.module
.rule('icons')// 定义一个名叫 icons 的规则
.test(/.svg$/)// 设置 icons 的匹配正则
.include.add(path.join(__dirname,'src/assets/icons/svg'))// 设置当前规则的作用目录,只在当前目录下才执行当前规则
.end()
.use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
.loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
.options({// 该 svg-sprite-loader 的配置
symbolId:'icon-[name]'
})
.end()
}
}
include.add(路径)–路径不正确会报以下错误:
4. 创建index.js 导入所有svg图标
icons文件夹创建index.js 自动导入所有svg图标。
icons/index.js代码:
const req = require.context('@/assets/icons/svg',false,/.svg$/)
const requireAll = requireContext =>{
// requireContext.keys()数据:['./404.svg', './agency.svg', './det.svg', './user.svg']
requireContext.keys().map(requireContext)
}
requireAll(req)
执行 requireContext.keys().map(requireContext)得到返回的数据:
5. main.js中引入icons/index.js
6. 创建SvgIcon公用组件
SvgIcon/index.vue代码:
<template>
<i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />
<svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners">
<use :xlink:href="`#icon-${iconFileName}`" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconFileName: {
type: String,
required: true
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
overflow: hidden;
vertical-align: -0.15em;
fill: currentColor;
}
</style>
全局注册SvgIcon组件:
使用SvgIcon组件:
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件