xx 的博客

2024 个人 SVG 最佳实践指南 ​

前言 ​

之前在 2023 个人最佳实践 中写过一些，今年有一些思考与调整，所以也想记录一下。

svg 图标查找 ​

我们在公司很多地方会有这样的平台， 比如 ：星辰平台；

现在也出现了 pixso 这样的平台，可以让我们在设计端直接下载 svg 并使用。

这里有个去中心化的概念，其实用什么图标库都行，主要还是要根据业务情况来定。如果有需要再做封装也可以。

svg 图标使用的最佳实践 ​

图标来源 ​

  • 基线从 pixso 中下载 svg 文件，设计还原度是最高的
  • 如果是定制或者简单页面，或者自己设计，可以比较倾向于去 icones 这样的工具去找，这里几乎都是开源的。

图标在项目的使用 ​

  • 在项目中单独放一个文件夹，专门放 svg 文件，建议是 components/icons 文件夹下，然后直接放 .vue 的后缀
  • 如果在比如组织树节点上使用的话，建议是 components/icons/tree 文件夹下，然后直接放 .vue 的后缀。这块我们会在 视频等组件中实践一下。
  • 文件命名，个人建议是 加个前缀，最好是 hi- 开头，比如 hi-xxx.vue，这样不会和项目中其他组件冲突
  • 如果存在有主形，辅形的图标，需要自己在vue文件中，处理svg的合并。
    • 同时可能也需要在不同的主形辅形下，使用不同的颜色。需要自己封装或者多出几个vue文件。

如果用 vite 可以使用，unplugin-vue-components，自动引入

使用 pixso svg 的注意事项 ​

pixso 导出的svg会有一些多余的东西，需要手动删除。我随便导出一个看下

html
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.000000" height="14.000000" viewBox="0 0 15 14" fill="none">
	<desc>
			Created with Pixso.
	</desc>
	<defs/>
	<g style="mix-blend-mode:normal">
		<path id="icon" d="M3 6.09998L3 0.5C3 0.200012 2.79999 0 2.5 0C2.20001 0 2 0.200012 2 0.5L2 6.09998C0.900024 6.29999 0 7.29999 0 8.5C0 9.70001 0.900024 10.7 2 10.9L2 13.5C2 13.8 2.20001 14 2.5 14C2.79999 14 3 13.8 3 13.5L3 10.9C4.09998 10.7 5 9.70001 5 8.5C5 7.29999 4.09998 6.29999 3 6.09998ZM8 2.09998L8 0.5C8 0.200012 7.79999 0 7.5 0C7.20001 0 7 0.200012 7 0.5L7 2.09998C5.90002 2.29999 5 3.29999 5 4.5C5 5.70001 5.90002 6.70001 7 6.90002L7 13.5C7 13.8 7.20001 14 7.5 14C7.79999 14 8 13.8 8 13.5L8 6.90002C9.09998 6.70001 10 5.70001 10 4.5C10 3.29999 9.09998 2.29999 8 2.09998ZM13 7.09998L13 0.5C13 0.200012 12.8 0 12.5 0C12.2 0 12 0.200012 12 0.5L12 7.09998C10.9 7.29999 10 8.29999 10 9.5C10 10.7 10.9 11.7 12 11.9L12 13.5C12 13.8 12.2 14 12.5 14C12.8 14 13 13.8 13 13.5L13 11.9C14.1 11.7 15 10.7 15 9.5C15 8.29999 14.1 7.29999 13 7.09998ZM6 4.5C6 5.29999 6.70001 6 7.5 6C8.29999 6 9 5.29999 9 4.5C9 3.70001 8.29999 3 7.5 3C6.70001 3 6 3.70001 6 4.5ZM1 8.5C1 9.29999 1.70001 10 2.5 10C3.29999 10 4 9.29999 4 8.5C4 7.70001 3.29999 7 2.5 7C1.70001 7 1 7.70001 1 8.5ZM11 9.5C11 10.3 11.7 11 12.5 11C13.3 11 14 10.3 14 9.5C14 8.70001 13.3 8 12.5 8C11.7 8 11 8.70001 11 9.5Z" clip-rule="evenodd" fill="#000000" fill-opacity="0.700000" fill-rule="evenodd"/>
	</g>
</svg>

可以看到有 desc 和 defs 标签，这些多余标签在项目中是不需要的，可以手动删除。也可以通过 vite 的插件进行删除。

还有就是里面有很多 id 属性，这些 id 属性在项目中也是不需要的，也可以手动删除。有些id可能会引发document.getElementById 冲突。一旦出问题非常难排查。另外有些设计师会在标注中写中文，这个在多语言翻译中会出现不必要的翻译问题，也是需要手动删除的。