1.SVG 图片处理器 svgo
2.在 umi 项目优雅地使用 SVG 图标
3.Bootstrap 开源 SVG 图标库 Bootstrap Icons
4.怎么把svg格式的图图标图标保存下来？
5.微信小程序 icon图标 SVG代码转码为Base64编码格式并使用
6.如何下载svg格式图标包？

SVG 图片处理器 svgo

       æœ€è¿‘设计同事给的 svg 文件出现了一些问题。比如我加了几个 svg 图片，实际看这几个图标的时候发现图标显示不全，或者颜色不对的问题。

        后来了解到了一个工具库 svgo，项目地址在此： /package/svgo ，它可以处理掉设计软件生成 svg 时遗留下来的非必要元素、标签。

        简单用法：

        另外，尽量保持 svg 文件里面的 class 名和 id 的唯一性。重复会引起一些图标显示问题。

在 umi 项目优雅地使用 SVG 图标

       项目初期，我们借助 svg-sprite-loader 实现 SVG 图标的标源加载，操作简便，设计仅需指定 name 即可。图图标然而，标源随着图标数量的设计线段裁切源码增加，维护变得异常困难，图图标loader 会在页面上渲染所有图标，标源组件声明中也需指定 name，设计导致维护成本上升。图图标

       为解决这一问题，标源实现像 ant-design 样式的设计智能提示与按需引用，无需额外 webpack 配置，图图标诞生了 umi-plugin-icons。标源安装插件后，设计仅需指定 SVG 文件路径，即可在项目中直接使用图标。调皮猴源码

       步骤如下：初始化 umi 项目并安装 umi-plugin-icons 插件，配置 .umirc.ts 或 config/config.ts 中的 icons 配置项。确保 svg 文件夹内包含 filled、outlined 文件夹，以兼容线性（outlined）与填充（filled）两种风格的图标，解决名称冲突问题。大部分图标采用 outlined 风格。

       引入图标，名称为「名」+「风格名」，大写驼峰命名，如「LikeOutlined」。插件内置 @icons 别名与对应的 babel-plugin-import 配置，简化引入过程。同时，新增或修改 svg 文件时，插件可实时生成组件。内核源码升级

       常见问题包括 classnames、@ant-design/colors 依赖找不到。解决方法是安装 antd 或直接安装这两个依赖。利用 umi-plugin-icons 提升项目中 SVG 图标的使用效率与体验。

Bootstrap 开源 SVG 图标库 Bootstrap Icons

       Bootstrap 正式推出开源的 SVG 图标库 Bootstrap Icons。这是 Bootstrap 团队首次拥有自己的图标库，最初这个库是为了配合 Bootstrap 的表单控件和导航组件等定制设计。现在，这个图标库已经对外开放，可用于任何项目，无论该项目是否使用 Bootstrap。

       作为 SVG 图标库，Bootstrap Icons 能够快速扩展，并支持 CSS 定制化。尽管它是为 Bootstrap 定制的，但仍可在各种项目中应用。源码加驱动需要注意的是，目前 Bootstrap Icons 处于 alpha 阶段，未来可能会有较大变动。

       Bootstrap Icons 官网提供了一个搜索框，用户可以通过输入英文关键字查找所需的图标种类。

       用户可以根据自己的需求，通过多种方式将 Bootstrap Icons 集成到项目中。

       更多信息请访问 Bootstrap 官方开源 SVG 图标库 Bootstrap Icons。

怎么把svg格式的图标保存下来？

       我以Google浏览器和阿里图标库(iconfont)举例，教大家怎么保存iconfont上的LOGO。

       需要什么：

       sublime text 编辑器，sublime text软件的下载地址请点击原文地址去下载

       iconfont

       步骤流程：

第一步：

       在浏览器任意区域先右键点击**检查**，弹窗开发者工具，然后选择开发者工具右侧上的箭头后点击要保存的SVG，在代码区域就会出现一段以SVG开头的代码。

       

第二步：

       选中这段代码后右键点击编辑该代码，here rtk 源码Ctr+A选中，Ctr + C复制整段代码

       

       

第三步：

       复制代码到sublime text编辑器，然后保存，保存时命名为名称+ .svg，格式设置为svg的就可以保存到自己的本地电脑上了。

       

       保存后就能看到iconfont的图标了，喜欢的朋友点个赞支持下哦~~

       原文地址：网页链接

微信小程序 icon图标 SVG代码转码为Base编码格式并使用

       SVG，可缩放矢量图形（Scalable Vector Graphics），是一种使用XML格式定义图像的图形格式。创建于年，于年成为W3C推荐标准。SVG具有矢量图形的特性，适合描述静态图像、动画和用户界面，尤其在设计图标和icon时应用广泛。

       获取SVG资源的途径多样，设计工具如Sketch支持导出SVG格式，而设计资源站点如iconfont提供了大量免费通用图标，支持导出为PNG、SVG、AI、SVG代码等。

       若无设计图，仅需下载常见图标，iconfont是个人推荐的资源站点。

       下载后，获得对应的SVG代码。

       为了适应微信小程序的限制，需将SVG代码转换为Base编码格式。常用转换地址为：codepen.io/jakob-e/pen/...。完成转换后，即可在小程序中使用。

       在小程序代码中引用SVG，与常规CSS引用SVG方法相似。具体代码实现如下：

       至此，通过SVG与Base编码的结合，成功在微信小程序中实现美观、灵活的图标显示。展示效果如下：

如何下载svg格式图标包？

       SVG的魅力与下载技巧

       在网页浏览中，那些精致的SVG矢量图标往往令人眼前一亮。对于设计师来说，这些图标是无价的创意素材。然而，浏览器往往不直接支持SVG的下载，这就需要我们动手操作了。让我们一起探索如何快速且便捷地获取这些图标，就像Logo在线生成：尽管链接在此处被删除，但你可以通过搜索在线生成Logo的平台来获取灵感。

       SVG：矢量图形的未来

       SVG，全称Scalable Vector Graphics，是一种开放标准的矢量图形语言，它的优势在于：无论放大多少倍，图像都能保持清晰度，文件体积小，传输方便。SVG中的文字是可编辑和可搜索的，不受字体限制，因此特别适合打造高分辨率的Web图形设计。这种格式的灵活性和质量使得它在现代设计中占据重要地位。

       两步走，轻松下载SVG图标

浏览器操作：首先，右键点击你想要的SVG图标，复制其URL，例如：Icons/Dachart/flachdach.svg。然后，打开Google Chrome，按F打开开发者工具。在工具栏中，找到并点击如图所示的三个点，选择"Copy" -> "Copy Element"，这样就将整个<svg>标签内的代码复制到剪贴板。

转换为SVG文件：新建一个纯文本文件，粘贴复制的代码。重要的是，别忘了将文件扩展名从TXT改为SVG，这样就完成了下载过程。

       SVG的特别打开方式

       由于SVG的特殊性，它不是常规格式，普通的查看器无法打开。Adobe Illustrator是处理SVG的首选工具，你可以用它查看、编辑甚至导出为其他格式。此外，SVGDeveloper等专业软件也为SVG的查看和编辑提供了方便，让SVG的魅力得以充分展现。

       现在，你已经掌握了如何下载和处理SVG图标，这些矢量宝藏将为你的设计项目增添无限可能。记住，每个细节都值得珍藏，SVG的精细与灵活性正是我们追求的极致体验。