解锁SVG新姿势：绘制图标+SVG 自动导入1 前言
大家好，我是心锁，一枚23届准毕业生。
近期很火，作为前端er，我思考与尝试了让它帮忙写代码、帮助我解析与研究某些国内资料较少的技术、优化代码、解释代码、优化简历——都非常棒，就是很可惜GPT的图片能力还一般，如果什么时候它可以解析图片了，或许图片生成代码就不远了。
等一下，SVG好像也是图片，就在某个时刻我灵光一闪，于是本文章就出来了。
2 目标
不知道诸位读者们有没有自己找icon的经历：
先找到对应图片并下载将文件移动到项目并改名在需要使用的地方导入并通过img标签使用
私以为，第一步，第二步，第三步我都不喜欢。有没有一种合适的方式，让我可以直接通过IDE新建文件，不再需要下载，同时使用的时候不再需要导入？
这或许是有的，本文旨在完成该目标。
3 演示生成SVG
本步骤也可以理解成正常流程中的寻找图标与自行绘制图片
众所周知，SVG是一种矢量图形格式，可以通过代码描述出图形，而不是像普通图片一样储存像素点。这使得SVG图标具有可缩放性，适合在不同分辨率的设备上使用。同时，SVG图标可以用作网站的某些元素，例如logo、导航菜单等。
再众所周知，具有生成代码的能力。我们可以利用生成SVG代码，这样就可以省去自己绘制图标或者自己找图标的步骤。
我试着用下边的文案生成了一些icon，大家可以参考：
3.1 一款网络助手的logo
生成一个扁平风格的图标，该图标用途是作为一款网络助手程序的logo。背景色是“#7FA1F7”，圆角22.5%。注意要求图像大小为64*64，图像内容需在viewBox居中。复制
3.2 绘制一个用于掘金的拟物化“矿石”图标
绘制一个64*64的“矿石”图标，以svg格式输出。该图标用于表示社区中的金币，图标风格应偏向拟物化风格，整体需符合掘金社区的气质，并确保图像内容需在viewBox居中。复制
复制
3.3 绘制一个用于掘金的拟态化“收藏”图标（它好像把掘金社区误会成真的掘金了）
绘制一个64*64的“收藏”图标，以svg格式输出。图标风格应偏向拟态化风格，整体需符合掘金社区的气质，并确保图像内容需在viewBox居中。复制
复制
4 Svg 自动导入4.1 什么是
为了实现不需要下载和导入文件，我们可以使用SVG 。使用SVG ，我们可以将所有的图标放在一个单独的SVG文件中，并通过引用该文件中的元素来使用它们。
以下是一个示例SVG文件，其中定义了两个元素：
复制
以下是一个使用SVG 的示例代码：
复制
在上面的代码中，我们通过元素引用了SVG文件中的两个元素，并将它们放在了 );}; ;
复制
在上面的代码中，我们定义了一个组件，用于渲染SVG图标。该组件使用了元素引用了SVG文件中的元素。其中，name属性用于指定元素的ID。
.svg-icon{
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}复制
使用em作为icon的单位，是因为em是相对于当前对象内文本的字体尺寸的宽度单位，这样我们就可以通过设置的方式来调整icon的图标了。
使用方式：
from “@/”;const : React.FC = () => { (
00推荐
发表回复