vue项目svg图标不显示

首先，确保您已经将SVG图标添加到您的Vue项目中，并且在正确的路径下。然后，您需要在Vue组件中正确使用SVG图标。以下是一个示例Vue组件：

<template>
  <div>
    <svg class="icon">
      <use xlink:href="#icon-my-icon"></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  mounted() {
    // 在组件挂载后，您可以通过控制台检查SVG图标的可见性
    const icon = document.querySelector('.icon');
    console.log(icon);
  },
};
</script>

请注意，使用SVG图标时，您需要使用`<use>`元素来引用SVG文件中的特定符号，而不是使用`<img>`或`<object>`元素。在上面的示例中，`<use>`元素的`xlink:href`属性指向SVG文件中id为“ icon-my-icon”的符号。

如果您的SVG图标仍然不显示，请检查是否存在CSS样式或JavaScript代码可能导致SVG图标不可见。您可以使用浏览器的开发人员工具检查元素样式和DOM结构，以找出问题所在。

相关问题

vue2项目中使用svg图标原创

在Vue2项目中，使用SVG（Scalable Vector Graphics）图标可以带来许多优势，比如矢量图形不受分辨率影响、体积小、加载快等。如果你想要使用原创的SVG图标，你可以按照以下步骤操作：

1. **创建SVG文件**：使用Illustrator、Sketch或其他矢量图形工具设计SVG图标。保持设计简洁明了，尽量避免过多的颜色和复杂的路径。

2. **保存SVG文件**：将设计导出为SVG格式，确保文件包含了XML声明和视图盒（`<svg>`标签），以及优化过的路径数据。

3. **封装到.vue文件**：为了便于复用和管理，可以将SVG作为组件编写，创建一个名为Icon.vue的文件，内容类似这样：

   <template>
     <symbol id="my-icon" viewBox="0 0 24 24">
       <path d="..."/>
     </symbol>
   </template>

   <script>
   export default {
     name: 'MySvgIcon',
     components: { },
     data() {
       return {
         iconPath: '#my-icon'
       }
     }
   }
   </script>

这里`viewBox`属性设置图标在24x24像素的坐标空间范围。

4. **在需要的地方使用**：

   <use :href="iconPath" class="your-icon-class"></use>

`:href`绑定到SVG组件的数据属性，动态显示对应的SVG图标。

5. **CSS样式**：如果需要，可以添加一些基本的CSS样式调整图标大小、颜色或位置。

vue如何直接使用svg图标

在Vue中直接使用SVG图标通常有两种常见的做法：

1. **内联SVG**:
- 将SVG作为字符串包含在模板的`<template>`标签内，例如:

     <div>
       <svg :width="24" :height="24">
         <use xlink:href="#icon-name"></use>
       </svg>
     </div>

这里假设`#icon-name`是你SVG文件中的ID。你可以通过CSS选择器动态设置宽度、高度等属性。

2. **引入外部SVG文件**:
- 首先将SVG保存为独立文件（如`icon.svg`），然后在项目中引用：

     <template>
       <img :src="require('./assets/icon.svg')" alt="Icon">
     </template>

使用`require`函数加载SVG，并通过`v-bind`绑定到元素的`src`属性。

3. **利用Webpack处理**:
如果你使用的是Webpack，可以使用`file-loader`和`url-loader`来转换SVG为Data URL，避免跨域问题：

   {
     test: /\.svg$/,
     use: [
       'file-loader',
       {
         loader: 'svg-url-loader',
         options: {
           limit: 10000, // 限制大小，超过则转为Data URL
           name: '[name].[ext]', // 输出文件名
         },
       },
     ],
   }

使用上述任一方法时，你还可以考虑使用专门的库，如`vue-svg-icon`或`vue-svg-loader`，它们提供了更方便的方式来管理SVG图标。