1 引言
在前端开发中常用的图标通常是 SVG 格式的。SVG 是一种矢量图形格式，可以根据背景变色，且在缩放时边缘不会模糊。像常用的 Element Plus Icon 就是使用 SVG 格式实现的。不过，有时候会找不到我们想要的图标，比如“另存为”、“剪切板”等。引入其他图标集可能也未必包含所有需要的图标。此外，这样做改动太大，还需要确保所有图标在风格上的一致性（例如宽度、弧度的一致）。因此，需要自己制作一些图标。
2 SVG 简介
-
SVG 是一种使用 XML 定义的可缩放矢量图形。
-
具体的 SVG 文件请参见：https://github.com/element-plus/element-plus-icons/ 中 packages/svg 目录下。
-
建议以现有的图标为基础，以复制粘贴和调整为主。
2.1 示例
-
vue 中的 svg 格式形如：
<template> <svg viewBox="0 0 24 24"> <path d="M3 12 L12 3 L21 12 L12 21 Z" fill="currentColor" /> </svg></template><script>export default { name: 'YourIcon'}定义自己的 SVG，只需要修改 YourIcon 及 path 内容即可。
2.2 path 语法
这里的 "path" 不是指具体路径，而是描述图形轮廓的矢量指令集。基本语法如下：
-
M = 移动到 (Move to)
-
L = 画直线到 (Line to)
-
H = 水平线到 (Horizontal line to)
-
V = 垂直线到 (Vertical line to)
-
Z = 闭合路径 (Close path)
-
C = 曲线 (Curve)
3 svg 编辑工具选择
3.1 常用工具
试用了一些设计工具，具体如下：
-
Figma
-
在线使用，功能齐全，但学习成本较高
-
我只用它制作 24x24 的小图标，有点大材小用
-
在线工具：https://www.figma.com/
-
用后感：
-
-
SVGEeditor
-
功能过于简单，不太够用
-
在线工具：https://svgeditoronline.com/
-
用后感：
-
-
Inkscape
-
功能多样且免费，用起来比较顺手
-
本地使用，需要安装，约 140M
-
用后感：
-
3.2 使用体验
-
如果想简单一些，可以将一些免费的 SVG 资源复制其路径内容到自己的 Vue 文件中。
-
如果需要自己设计并保持统一风格，建议使用 Inkscape。
-
我觉得 24x24 的图标自己稍微修改一下就行，并不需要多么高深的艺术技能，而且使用次数不多，充会员也不值得。
4 inkscape 用法
4.1 安装
sudo apt-get install inkscape4.2 做图标步骤
-
在菜单中选择“由模板新建”，并选择 24x24 的图标大小，或打开现有的 SVG 文件。
-
使用基础形状工具如矩形、圆形和线条进行绘制。如果熟悉 Photoshop，推荐使用钢笔工具。
-
选中绘制对象，打开右侧的填充/描边面板进行设置。
-
利用路径工具编辑节点。
-
导出 SVG 并将其复制到 Vue 文件中。
-
如果图形元素较多，导致布局混乱，可以使用 Copilot 进行优化，无需额外寻找优化工具，Copilot 能够自动解决。
4.3 从网页中抠图标
如果喜欢网页上的某个 SVG 图标，可以使用以下方法获取：
-
在浏览器中打开 DevTools (F12)
-
选择 Elements 面板
-
找到图标元素
-
右键 -> Copy -> Copy Element，获取其中的 svg 部分
-
注意：要去除多余的 class
5 参考资源
现成的 SVG 资源可以参考以下网站：
-
Element Plus 图标预览：https://element-plus.org/zh-CN/component/icon.html
-
Heroicons 预览：https://heroicons.com
-
Font Awesome 预览：https://fontawesome.com/icons
-
这个网站有部分免费资源，直接提供 SVG 格式内容复制
-
复制 SVG 时，注意删除多余的注释
-
