vue create svg-icon

在Vue.js中创建SVG图标通常涉及到使用`vue-cli`脚手架命令行工具。如果你想通过`vue create`生成一个新的Vue项目并包含SVG图标的支持，可以按照以下步骤操作：

1. **安装Vue CLI**：首先确保已经全局安装了Vue CLI，如果没有，运行`npm install -g @vue/cli`。

2. **初始化项目**：打开终端或命令提示符，导航到你想创建项目的文件夹，然后输入`vue create project-name`（替换`project-name`为你的项目名称）。

3. **选择模板**：当脚手架询问你想要哪种预设时，选择“Manually select features”（手动选择特性），然后按Enter继续。

4. **添加自定义配置**：在接下来的配置界面，找到`Additional configuration options`部分，在这里添加对`svg-sprite-loader`的支持。在`Webpack chain`选项里，你可以看到一个编辑器，搜索`svg`，在`resolve.alias`下添加一个新条目，例如：

   {
     "icons": path.resolve(__dirname, "./src/icons"),
   }

5. **安装依赖**：在`Additional packages to install`部分，输入`@vue/babel-plugin-jsx` 和 `svg-sprite-loader`，然后点击`Create project`。

6. **创建SVG组件**：在`src/components`目录下创建一个名为`SvgIcon.vue`的新文件，内容如下：

   <template>
     <use :href="iconPath" />
   </template>

   <script setup>
   import { ref } from 'vue';
   const iconPath = ref(`icons/${props.name}.svg`);
   </script>

7. **使用SVG图标**：现在可以在其他组件中导入并使用SVG图标，例如：

   <SvgIcon name="your-icon-name" />

完成以上步骤后，你就可以在Vue项目中创建、引用和管理SVG图标了。