Vue SVG 组件生成器
将SVG文件转换为Vue组件。生成Vue SFC，包含用于尺寸、颜色的响应式属性、作用域样式和TypeScript支持。
SVG to Vue Component
Options
<script setup lang="ts">
import { computed } from 'vue';
interface Props {
size?: number | string;
width?: number | string;
height?: number | string;
fill?: string;
stroke?: string;
className?: string;
}
const props = withDefaults(defineProps<Props>(), {
fill: 'currentColor',
stroke: 'currentColor',
});
const computedWidth = computed(() => props.size || props.width || 24);
const computedHeight = computed(() => props.size || props.height || 24);
</script>
<template>
<svg viewBox="0 0 24 24" :width="computedWidth" :height="computedHeight" :fill="fill" :stroke="stroke" :class="className" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</template>
<style scoped>
svg { display: inline-block; vertical-align: middle; }
</style>
What is Vue SVG 组件生成器?
Vue SVG组件生成器是一款在线代码生成工具，可将原始可缩放矢量图形（SVG）标记转换为整洁惯用的Vue 3单文件组件（SFC），可在Vue、Nuxt和Vite应用程序中使用。在Vue模板中使用原始内联SVG有效但不可重用：组件缺少用于尺寸、填充和描边颜色的可配置属性，不遵循Vue约定（如连字符大小写属性处理），不支持作用域样式，并且通常缺少aria-label和role等可访问性属性。本生成器生成结构正确的Vue SFC，包含template、script和可选的style块。工具自动为Vue模板准备SVG标记，添加响应式属性（包括宽度、高度、填充颜色、描边颜色、描边宽度和回退class属性），同时生成Composition API script setup和Options API变体，在选中时包含TypeScript支持（带有类型化的属性接口），可选应用作用域样式块，并添加带有可自定义标签的适当可访问性属性。其他选项包括接受CSS自定义属性以进行主题集成、使用Vue 3 defineProps将SVG作为功能组件发出，以及可选添加viewBox规范化和尺寸回退。生成的组件代码与语法高亮一起并排显示SVG渲染的实时预览，并包含一键复制按钮以及作为.vue SFC文件的下载选项。所有代码生成在浏览器本地运行，SVG数据不会上传到外部服务器。
When to Use Vue SVG 组件生成器
用于为Vue 3或Nuxt项目构建可重用的Vue图标库、将SVG插图导入Vue应用程序、为TypeScript Vue代码库生成类型化SVG组件、为Vue设计系统准备SVG资源，或避免大量图标的手动SVG到模板转换。
How to Use Vue SVG 组件生成器
粘贴SVG标记或上传SVG文件。选择Vue API样式（Composition API script setup或Options API）。切换TypeScript支持和可访问性属性。配置要暴露哪些属性（宽度、高度、填充、描边等）。在渲染的SVG旁边预览生成的.vue组件。将代码复制到剪贴板或下载为.vue单文件组件。