大家好呀，我是一个前端小倒霉蛋wangly。 近期一直忙于业务开发，和复习知识点，就没有更新文章。刚好最近业务上做了一个地图的下钻和原点图。就将它写成一篇文章吧。与诸君共勉。当然，如果最近的项目中需要制作这个功能。也可以直接clone代码。根据自己的需求实现相应功能。 这次就以…

✨ 别只是懂Vue和React了，原生的东西也赶紧学起来吧。SVG在前端的地位越来越高，它能轻轻松松做出CSS难以做到的特效 ✨

周六来公司写点东西，刚好有个icon颜色不对，ui又不在公司，那么就只能自己动手丰衣足食了。 呜呜呜，好想住公司，都不用上下班了。 当ui给你了svg图片，且是单色的，又只有你用 svg填充色用的fi

配置环境在config.js文件中加载以下内容，让我们指定的文件走什么形式（类似于loader）在shims-vue-d-ts文件中加入（单个文件）//分析svg图片，import引用多个svg文件一

vite-plugin-svg-icons 预加载 在项目运行时就生成所有图标,只需操作一次 dom 高性能 内置缓存,仅当文件被修改时才会重新生成。

相信每位前端童鞋都对字体图标不陌生，毕竟网页必然少不了用大量的图标来装饰页面效果。在很早的时候，我们一般都是用img来当作图标来使用，由于大量地使用img会造成http请求过多的问题，所以这类使用方式也很快就被抛弃了，即使雪碧图也退出了历史的舞台(因为各种定位写法真的太麻烦了…

在页面中以 symbol 引用的方式使用 SVG，已经成为目前最完美的图标解决方案。除了使用一些无版权图标网站如 Iconfont 提供的引入方式外，我们还可以在项目中使用 Webpack 来引入自己的 SVG，这就要用到 svg-sprite-loader。 安装完成以后需要…