Vue学习-1（11）使用svg-sprite-loader引入icon

最新推荐文章于 2025-04-18 07:03:54 发布
最新推荐文章于 2025-04-18 07:03:54 发布
阅读量186 收藏
点赞数
分类专栏： vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hell_csdn/article/details/111877342
版权
本文介绍了如何在Vue项目中通过svg-sprite-loader处理SVG图标，包括从iconfont.cn下载SVG文件，解决TS检查问题，以及在WordPress和Vue中配置svg-sprite-loader，最后展示如何引入和使用SVG图标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

icon从精灵图->svg

  • iconfont.cn下载svg

  • 引入svg过不了ts检查
    image-20201228181537404
    image-20201228181642925
    image-20201228181833616
    image-20201228181935873

  • wp添加svg-sprite-loader
    image-20201228182322604

yarn add svg-sprite-loader -D
  • vue添加svg-sprite-loader
最低0.47元/天 解锁文章
svg-sprite-loader
郭宝的博客
11-12 2092
svg-sprite-loader 是什么？ 它是用于创建SVG精灵图的Webpack加载程序。通过该插件可以将导入的SVG文件自动生成为symbol标签并插入进html中。 官方源码 svg-sprite-loader 怎么使用？ 1、安装 npm install svg-sprite-loader -D ...
vue项目中使用svg图标/插件svg-sprite-loader
smouns_的博客
07-08 707
vue项目中使用svg图标,利用插件svg-sprite-loader
在Vue3项目中使用svg-sprite-loader
qq_52569656的博客
10-18 9906
本文基于Vue3项目介绍svg-sprite-loader在项目中的使用方式,手把手教你封装一个SvgIcon全局组件，提高svg图标复用性的同时让你的代码看起来更加优雅。
SVG Sprite Loader 安装与配置指南
最新发布
gitblog_00325的博客
04-18 638
SVG Sprite Loader 安装与配置指南 svg-sprite-loader Webpack loader for creating SVG sprites. 项目地址: https://gitcode.com/gh_m...
推荐神器：SVG Sprite Loader - 现代前端SVG图标管理的新方案
gitblog_00095的博客
03-24 819
推荐神器：SVG Sprite Loader - 现代前端SVG图标管理的新方案 svg-sprite-loader 项目地址: https://gitcode.com/gh_mirrors/svg/svg-sprite-loader ...
Vue2搭建基础架构（8）--- 使用svg-sprite-loader
weixin_48040732的博客
01-14 1007
这里记录下自己在Vue2的项目使用svg-sprite-loader来全局使用svg雪碧图，方便以后直接使用。这里是将之前Vue3的基础架构转为Vue2语法开发。
使用Vue（svg-sprite-loader、vue2-svg-icon）重构svg管网监控图
Elena102896的博客
12-18 2059
        9月底，接手了一个项目，主要是完成流程单元回路管网的监控。考虑到开发现状，第一版开发采用了HTML、CSS、ECharts、JQuery、SVG（使用工具Visual Graph绘制管道网络图，导出svg文件备用）、.Net、Oracle技术完成。主要完成监控数据的展示、监控切换与跳转。例如：报警类信息、监控指标详细信息的展示；切换、选择、超链接等交互功能。由于目前了解到的管道图数...
vue-cli svg-sprite-loader
qq_40822000的博客
11-22 1012
在vue-cli中使用svg-sprite-loader 新手上路，有什么不对的地方请不吝赐教 svg-sprite-loader是干啥的？ 当你有很多的svg图片的时候，你可以使用svg-sprite-loader来把图片打包成雪碧图（不是心飞扬哪个雪碧），然后使用时每个svg对应一个name标识。 svg-sprite-loader安装 npm install svg-sprite-loade...
关于vue-cli4 使用 svg-sprite-loader
hy116420的博客
02-25 1306
vue-cli4 使用 svg-sprite-loader 不得不说一句，网上的文章大多有点坑，很多都是相互复制，我被别人坑了。废话少说，文章具有时效性，这里只是针对我遇到的情况，我使用的vue-cli使用的版本是4.5.11。 vue.config.js module.exports = { lintOnSave: false, chainWebpack(config) { const svgRule = config.module.rule('svg');
vue-cli3 使用svg-sprite-loader的使用
maggie_live的博客
05-13 2985
1.为什么使用svg-sprite-loader？ 用来根据导入的svg文件自动生成symbol标签并插入html，接下来就可以在模板忠方便地使用svg-sprite技术了 通常我们项目都是使用iconfont阿里巴巴图标矢量库，缺点： 操作繁琐，每次ui需要加一些新的图标的时候，都要重新下载图标库的项目，然后把整体的文件（其中包括css,svg,ttf,woff等）替换掉。 如果更改名称的...
svg-sprite-loader.rar
09-11
vue项目中引用svg-sprite-loader图标时，需要的icons和SvgIcon目录，因为这两个目录文件都是固定的，这里直接提供下载
svg-sprite-loader：用于创建SVG精灵的Webpack加载器
02-06
SVG精灵加载器 用于创建SVG精灵的Webpack加载器。 :party_popper: 2.0已发布，请阅读。 :warning: 对于旧的v0.x版本，请参见。 目录 （不建议使用） 为什么很酷 最小的初始配置。 大多数选项是自动配置的。 浏览器的运行时。 精灵会自动呈现并注入页面中，您只需通过<svg><use xss=removed></use></svg>引用图像即可。 node / browser的同构运行时。 可以在服务器或浏览器中手动渲染精灵。 可定制的。 编写/扩展运行时模块以实现自定义的sprite行为。 编写/扩展运行时生成器以生成您自己的运行时，例如，使用导入符号配置的Reac
VUE-cli3使用 svg-sprite-loader
10-17
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，这篇文章主要介绍了VUE-cli3使用 svg-sprite-loader,需要的朋友可以参考下
Vue封装自己的Svg图标组件库（svg-sprite-loader）
weixin_45774042的博客
08-29 2565
Vue封装自己的Svg图标组件库（svg-sprite-loader）
使用 svg-sprite-loader、svgo-loader 优化 svg symbols
热门推荐
Mark
04-08 1万+
最近重新学习了一遍 React 基础，新起了个小 Demo 实践一下，项目中用到的静态资源也比较少，图标当时使用的是svg symbols 的方式引入（字体图标三种格式区别），但是在开发的过程中遇到几个问题： ① 下载的 svg 可能有自带的 fill 属性，添加 color 样式不生效。 ② 封装 Icon 组件时，每用到一个 svg 图标都需要引入一下，显得有点不太聪明。 为解决上述两个问题，上网找了一下解决方案，在这里总结一下，每天成长一点点。
Vue使用svg-sprite-loader自动引入svg图标 [自己遇到的问题解决]
bao
03-19 2446
我使用的vue + ts. 内容中包含ts 和 js 两个版本的代码.写完之后发现写的可能有些啰嗦 ????我的项目目录现在未配置之前使用 svg1. 安装 [svg-sprite-loader](#https://www.npmjs.com/package/svg-sprite-loader)2. 在 `vue.config.js` 中配置 `svg-sprite-loader`vue.config.js 配置配置之后再可以查看是否配置成功3. 配置自动引入svg, 配置完成之后只需要下载svg -&g
Vue项目使用svg之svg-sprite-loader详细使用
kirinlau的专栏
10-17 1712
项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图，但是svg不能直接像image标签一样直接使用，这就需要前端的同学自己处理了。当然你你也可以在main中引入并注册svg组件，我是为了方便维护把功能抽到了icon文件下面了。那这么好的东西怎么在前端vue项目中使用呢？组件属性的icon-file-name的值就是svg文件的名字。好的，就可以方便的使用svg了。
使用svg-sprite-loader批量引入svg
qq_42882723的博客
08-24 351
svg-sprite-loader批量处理svg图标
Vue-cli3配置svg-sprite-loader实现SVG图标管理
Vue CLI 3 结合 `svg-sprite-loader` 提供了一种高效且灵活的方式来管理和使用 SVG 图标，避免了因直接引入 SVG 文件而导致的性能问题，同时也简化了代码的编写和维护。通过以上步骤，你可以在 Vue 项目中实现 SVG ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值