<svg-icon icon-class="money" class-name="card-panel-icon" /> vue项目中svg-icon 图标不显示 如何解决
时间: 2024-04-26 17:22:52 浏览: 23
这个问题可能是由于以下原因导致的:
1. 没有正确安装svg-icon组件
2. 没有正确配置svg文件的路径
3. 没有正确引入svg-icon组件
你可以尝试以下几个解决方法:
1. 确认你已经正确安装了svg-icon组件,并且在项目中正确引入了该组件。
2. 确认你已经正确配置了svg文件的路径,可以在svg-icon组件的配置文件中修改路径。
3. 确认你正确引入了svg-icon组件,并且在使用时,已经传入了正确的icon-class和class-name参数。
如果以上方法都不能解决问题,你可以尝试在vue项目中使用其他的svg图标库,例如fontawesome或ionicons等。
相关问题
vue2中使用<svg-icon/>组件
在 Vue2 中使用 `<svg-icon/>` 组件,需要先安装 `svg-sprite-loader` 和 `svg4everybody` 依赖。
1. 安装依赖
```bash
npm install svg-sprite-loader svg4everybody --save-dev
```
2. 创建 `svg` 文件夹,放置 `svg` 图标文件
3. 在 `vue.config.js` 文件中配置 `svg-sprite-loader`
```js
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg');
// 清除已有的所有 loader。
// 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear();
// 添加要使用的 loader
svgRule
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
});
}
};
```
4. 创建 `SvgIcon.vue` 组件
```vue
<template>
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</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>
```
5. 在组件中使用 `<svg-icon/>`
```vue
<template>
<div>
<svg-icon icon-class="xxx" />
</div>
</template>
<script>
import SvgIcon from '@/components/SvgIcon';
export default {
name: 'Example',
components: {
SvgIcon
}
};
</script>
```
<svg-icon icon-class="lu" className="icon"> </svg-icon>这样使用svg有问题吗
这个代码片段是使用 Vue.js 的组件方式来使用 SVG 图标的。如果你的项目中有引入 Vue.js 并且已经注册了 `svg-icon` 组件,那么这样使用 SVG 是没有问题的。只要确保你引入的 SVG 图标文件是有效的,并且被正确地传递到组件中就可以了。不过,如果你使用的是其他的框架或者纯 HTML/CSS/JS,那么就需要使用其他的方式来使用 SVG 图标。例如,可以使用 `img` 标签、`object` 标签或者 `svg` 标签等来引入 SVG 图标文件。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)