--- theme: devui-blue --- # 解锁SVG新姿势：ChatGPT绘制图标+SVG Symbol自动导入 # 1 前言大家好，我是心锁，一枚23届准毕业生。近期ChatGPT很火，作为前端er，我思考与尝试了让它帮忙写代码、帮助我解析与研究某些国内资料较少的技术、优化代码、解释代码、优化简历——都非常棒，就是很可惜GPT的图片能力还一般，如果什么时候它可以解析图片了，或许图片生成代码就不远了。

9f867531e614d96f50539edf78c17b3c

等一下，SVG好像也是图片，就在某个时刻我灵光一闪，于是本文章就出来了。 # 2 目标不知道诸位读者们有没有自己找icon的经历： 1. 先找到对应图片并下载 2. 将文件移动到项目并改名 3. 在需要使用的地方导入并通过img标签使用私以为，第一步，第二步，第三步我都不喜欢。有没有一种合适的方式，让我可以直接通过IDE新建文件，不再需要下载，同时使用的时候不再需要导入？

ccda3dbac680008f1fea80c9cbef1f8a

这或许是有的，本文旨在完成该目标。 # 3 演示ChatGPT生成SVG > 本步骤也可以理解成正常流程中的寻找图标与自行绘制图片众所周知，SVG是一种矢量图形格式，可以通过代码描述出图形，而不是像普通图片一样储存像素点。这使得SVG图标具有可缩放性，适合在不同分辨率的设备上使用。同时，SVG图标可以用作网站的某些元素，例如logo、导航菜单等。

3d51e70b5bb1aafebf9a675ed02f7148

再众所周知，ChatGPT具有生成代码的能力。我们可以利用ChatGPT生成SVG代码，这样就可以省去自己绘制图标或者自己找图标的步骤。我试着用下边的文案生成了一些icon，大家可以参考： ## 3.1 一款网络助手的logo ``` 生成一个扁平风格的图标，该图标用途是作为一款网络助手程序的logo。背景色是“#7FA1F7”，圆角22.5%。注意要求图像大小为64*64，图像内容需在viewBox居中。 ``` ![Untitled](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d55bcd39800478996b9047e5b737b66~tplv-k3u1fbpfcp-zoom-1.image) ![Untitled](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/107daad17d8446b19c84d4e565aa6f22~tplv-k3u1fbpfcp-zoom-1.image) ## 3.2 绘制一个用于掘金的拟物化“矿石”图标 ```html 绘制一个64*64的“矿石”图标，以svg格式输出。该图标用于表示社区中的金币，图标风格应偏向拟物化风格，整体需符合掘金社区的气质，并确保图像内容需在viewBox居中。 ``` ```html ``` ![Untitled](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db5dd5f44fa748febbc6c7926d019a51~tplv-k3u1fbpfcp-zoom-1.image) ## 3.3 绘制一个用于掘金的拟态化“收藏”图标（它好像把掘金社区误会成真的掘金了） ```html 绘制一个64*64的“收藏”图标，以svg格式输出。图标风格应偏向拟态化风格，整体需符合掘金社区的气质，并确保图像内容需在viewBox居中。 ``` ```html ``` ![Untitled](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37aa09b1f7ec44a5ac99587df78948e7~tplv-k3u1fbpfcp-zoom-1.image) # 4 Svg Symbol自动导入 ## 4.1 什么是Symbol 为了实现不需要下载和导入文件，我们可以使用SVG Symbol。使用SVG Symbol，我们可以将所有的图标放在一个单独的SVG文件中，并通过引用该文件中的Symbol元素来使用它们。以下是一个示例SVG文件，其中定义了两个Symbol元素： ```html ``` 以下是一个使用SVG Symbol的示例代码： ```html ``` 在上面的代码中，我们通过``元素引用了SVG文件中的两个Symbol元素，并将它们放在了`

e7978f6e059b813fdb6fcab662561fa6

```tsx // svg-sprite.ts const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext); importAll(require.context('./svg', true, /\.svg$/)); export {}; ``` 在上面的代码中，我们使用`require.context`函数导入了所有以`.svg`结尾的文件，并将它们添加到页面中。在该步骤，需要注意两个点。 - 需要导入`svg-sprite.ts`文件务必在主文件中导入该文件： ```tsx // App.tsx import "./images/svg-sprite"; ``` - 若出现和WebpackModuleApi相关错误，强烈建议使用any代替 ![Untitled](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e18eef8e6a17470fb29d98f3eab93eda~tplv-k3u1fbpfcp-zoom-1.image) ### 4.2.3 在React中使用为方便使用，我们封装一个SvgIcon组件。 ```tsx import React from "react"; import "./index.less"; export interface SvgIconProps extends React.HTMLAttributes { name: string; className?: string; color?: string; } const SvgIcon: React.FC = ({ name = "", className = "", color = "currentColor", ...rest }) => { return ( ); }; export default SvgIcon; ``` 在上面的代码中，我们定义了一个`SvgIcon`组件，用于渲染SVG图标。该组件使用了``元素引用了SVG文件中的Symbol元素。其中，`name`属性用于指定Symbol元素的ID。 ```less .svg-icon{ width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } ``` 使用`em`作为icon的单位，是因为`em`是相对于当前对象内文本的字体尺寸的宽度单位，这样我们就可以通过设置fontSize的方式来调整icon的图标了。

bde845294befa2c602ccfd34cd466edc

使用方式： ```tsx import SvgIcon from "@/components"; const MyComponent: React.FC = () => { return (

); }; ``` 在上面的代码中，我们使用了`SvgIcon`组件来渲染SVG图标，其中，`name`属性用于指定需要渲染的图标的名称。至此，我们已经完成了将SVG图标转换为SVG Symbol，并自动导入的流程。现在，我们可以直接在代码中使用SVG图标了，而不需要导入文件。 ### 4.2.4 性能考虑值得注意的是，该方法存在一定的问题。由于我们全量引用了图标，会导致在所有页面，都会导入所有icon，原因是我们在`svg-sprite.ts`文件中做了自动化导入，我们亦可通过单行导入的方式来避免全量引入，我目前在思考有没有什么更好的方案解决该问题。 ```tsx import "@/images/svg/rough.svg"; ``` # 5 总结本文主要介绍了两个方法，分别是使用ChatGPT自动生成SVG代码和使用Webpack和svg-sprite-loader自动导入SVG Symbol。这些方法可以使得在代码中使用SVG图标更加方便和高效。

c0d0f1ab7c1dc04f23466b063757b416

综上所述，通过使用ChatGPT自动生成SVG代码和使用Webpack和svg-sprite-loader自动导入SVG Symbol，我们可以更加便捷地在代码中使用SVG图标，提高开发效率和代码质量。 --- ***本文正在参加[「金石计划」](https://juejin.cn/post/7207698564641996856/ "https://juejin.cn/post/7207698564641996856/")***