没有合适的资源?快使用搜索试试~ 我知道了~
VUE-cli3使用 svg-sprite-loader
0 下载量 57 浏览量
2020-12-11
05:52:39
上传
评论
收藏 254KB PDF 举报
温馨提示
VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html,接下来就可以在模版中方便地使用 svg-sprite 技术了。 使用 svg-sprite 的好处 页面代码清爽 可使用 ID 随处重复调用 每个 SVG 图标都可以更改大小颜色 安装插件 npm install svg-sprite-loader --save-dev webpack 配置,在Vue.config.js加入处理 svg 的 loader: const path = require('pa
资源推荐
资源详情
资源评论
VUE-cli3使用使用 svg-sprite-loader
VUE-cli3使用 svg-sprite-loader
svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html,接下来就可以在模版中方便地使用
svg-sprite 技术了。
使用使用 svg-sprite 的好处的好处
页面代码清爽
可使用 ID 随处重复调用
每个 SVG 图标都可以更改大小颜色
安装插件安装插件
npm install svg-sprite-loader --save-dev
webpack 配置,在Vue.config.js加入处理 svg 的 loader:
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
//const svgRule = config.module.rule('svg')
//svgRule.uses.clear()
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/icons')) //处理svg目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
configureWebpack: () => ({
// resolve: {
// alias: require('./alias.config').webpack
// }
// module: {
// rules: [{
// test: /\.svg$/,
// use: [{
// loader: "svg-sprite-loader",
// options: {
// symbolId: 'icon-[name]'
// }
// }] // }] // }
})
}
这时候发现还是不行啊, body 中并没有看到 symbol 标签。
资源评论
weixin_38633083
- 粉丝: 0
- 资源: 896
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- exp4_2.c.sln
- [雷军]美妙的爱情......福的味道。.mp3
- 2023-04-06-项目笔记 - 第三百二十阶段 - 4.4.2.318全局变量的作用域-318 -2025.11.17
- 2023-04-06-项目笔记 - 第三百二十阶段 - 4.4.2.318全局变量的作用域-318 -2025.11.17
- java资源异步IO框架 Cindy
- java资源业务流程管理(BPM)和工作流系统 Activiti
- java资源高性能内存消息和事件驱动库 Chronicle
- 哋它亢技术应用2慕课自动化学习
- java资源高性能的JSON处理 Jackson
- java资源高性能的Java 3D引擎 Xith3D
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功