vue cli 封装svg 无法显示

当我们在Vue项目中使用vue-cli封装的SVG图标时，有可能遇到无法显示的问题。出现这个问题的原因可能是以下几种情况：

1. SVG文件没有正确添加到项目中：首先，确认SVG文件是否已经正确地添加到了项目的指定文件夹中，例如`src/icons`。在项目启动时，Vue CLI会自动将该文件夹中的SVG图标全部导入。

2. SVG文件命名不规范：确保SVG文件的命名是以`.svg`结尾，并且命名中不包含空格或特殊字符。Vue CLI会自动将这些文件导入为Vue组件。

3. 组件引用不正确：在使用SVG图标的地方，需要正确地引用SVG的Vue组件。例如，使用`<icon-svg name="icon-name" />`的形式进行引用。

4. 确认是否已安装相关依赖：在封装SVG图标时，可能需要安装相关的依赖。例如，使用`npm install --save-dev svg-sprite-loader`安装SVG精灵加载器。确保已经按照项目的要求正确地安装了相关依赖。

5. 解决模块化问题：如果项目是通过Vue CLI创建的，那么应该已经使用了模块化的方式。确保在引用SVG图标时，已经按照模块化的规范进行了导入。

如果以上办法都没有解决问题，可以在项目的配置文件中查看相关配置是否正确，例如`vue.config.js`。或者尝试在浏览器控制台查看是否有相关的错误提示信息，以便更好地定位和解决问题。

相关问题

vue3 svg-icon

在Vue3中使用svg-icon组件需要进行以下步骤：

1. 首先，在`main.js`文件中导入标和图标组件：

import '@/assets/icons' // 导入图标资源
import SvgIcon from '@/components/SvgIcon.vue'// svg component

const app = createApp(App)
app.component('svg-icon', SvgIcon)
app.mount('#app')

2. 其次，安装`svg-sprite-loader`依赖：

npm i svg-sprite-loader@6.0.11

并下载所需的图标，将其导入项目。在`assets`目录下创建`icons`目录，在`icons`目录下创建`svg`目录，将下载的图标文件保存在其中。

3. 其次，在`vue.config.js`文件中进行配置：

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)

module.exports = defineConfig({
  // ...其他配置
  chainWebpack (config) {
    // 设置 svg-sprite-loader 配置
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons')) // 排除 svg 目录
      .end()

    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons')) // 只包含 svg 目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ symbolId: 'icon-[name]' })
      .end()
  }
})

4. 最后，封装使用`svg-icon`组件，在需要使用图标的地方直接使用：

<svg-icon name="user" color="red" size="48"></svg-icon>