将 SVG 转换为 Vue 组件

粘贴 SVG,即可得到单文件 Vue 3 组件(.vue),可直接导入您的项目,并自动将属性(class、style、尺寸)透传给父级。

示例:

为什么要把 SVG 转成 Vue 组件,而不是直接导入?

专为图标编写的 Vue 组件可以在项目中随处轻松复用,允许您从任意父组件向它传入类名或样式(颜色、尺寸),并且和其他 Vue 组件一样,能获得编辑器的语法高亮与检查支持。

Vue 也需要像 React 那样把属性转换为 camelCase 吗?

不需要。与 React/JSX 不同,Vue 模板原生支持 kebab-case 属性(stroke-width、fill-rule……),可原样使用,因此无需转换任何属性,只会额外加入 v-bind="$attrs",以便在使用时自定义组件。

我能在父组件中更改图标的颜色吗?

如果您的 SVG 使用了 fill="currentColor"(如示例所示),周围 CSS 的文字颜色会自动应用到图标上:只需修改父级的 CSS 属性 color,即可为图标重新着色,无需改动组件本身。

您的 SVG 文件保持私密:转换为 Vue 组件的过程完全在您的浏览器中运行,不会向任何服务器发送数据。