vue cli 封装svg 无法显示

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

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

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

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

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

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

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

相关问题

vue3 svg-icon

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

首先，在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()
}
})

最后，封装使用svg-icon组件，在需要使用图标的地方直接使用：<svg-icon name="user" color="red" size="48"></svg-icon>

uniapp 封装本地 svg 组件

封装本地 SVG 图标组件的最佳实践
在 UniApp 中封装本地 SVG 图标组件可以通过 Vue 的单文件组件（SFC）形式完成，这种方式不仅便于管理图标资源，还能提升项目的可维护性和扩展性。以下是详细的实现方法：
1. 创建 SVG 文件夹并导入到项目中
将所有的 SVG 文件存放在 static/icons 或者其他指定目录下。通过路径引用这些静态资源。
// 在 main.js 中全局注册 svg-icon 组件
import SvgIcon from '@/components/SvgIcon.vue';
Vue.component('SvgIcon', SvgIcon);

[^1]
2. 定义通用的 <SvgIcon> 组件
创建一个名为 SvgIcon.vue 的组件用于加载和渲染 SVG 图标。
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>

<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className;
} else {
return 'svg-icon';
}
}
}
};
</script>

<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

3. 使用 Symbol 和 Sprite 合并 SVG 资源
为了减少 HTTP 请求次数，可以将多个 SVG 图标合并成一个 sprite 文件，并利用 <symbol> 标签定义各个图标。
工具推荐：SVGO、Symbol-Observer 插件
使用工具如 SVGO 自动优化 SVG 文件大小，或者借助 Webpack 插件（如 vue-cli-plugin-svg-sprite-loader），自动处理 SVG 并生成 symbol。
配置示例：
const path = require('path');
module.exports = {
chainWebpack: config => {
const svgoLoaderRule = config.module.rule('svgo').test(/\.svg$/).include.add(path.resolve(__dirname, './src/assets/svg')).end();
svgoLoaderRule.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
});
}
};

4. 实际调用方式
在页面或组件中可以直接通过传入参数的方式使用已封装好的 SVG 图标。
<SvgIcon icon-class="example" class-name="custom-class"/>

其中 icon-class 对应的是你在 sprite 文件中的 id 名称；而 class-name 则允许额外自定义样式类名。

关于 SVG 基本图形元素的应用补充说明
除了上述提到的方法外，在某些场景下可能还需要了解更底层的操作比如直接绘制简单形状（line/polyline）。这有助于开发者灵活应对不同需求场合下的视觉表现力增强以及性能优化等问题。
对于 SVG line 及其变体 polyline 的具体应用案例，请参阅相关内容[^2]，它们能够帮助我们更好地理解和运用矢量绘图技术来创造更加生动丰富的用户体验界面效果。