<svg-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
时间: 2023-11-17 10:02:16 浏览: 37
这是一个Vue项目启动时的错误信息,提示你没有正确注册<svg-icon>组件。可能的原因是你忘记在Vue组件中注册该组件,或者在注册时没有提供正确的组件名称。解决方案是在Vue组件中正确注册<svg-icon>组件,并确保提供正确的组件名称。在Vue项目工程下的main.js文件中添加以下代码即可解决该问题:
```javascript
import SvgIcon from 'vue-svgicon'
Vue.use(SvgIcon, {
tagName: 'svg-icon'
})
```
其中,'svg-icon'是你为该组件提供的名称,可以根据需要进行更改。
相关问题
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>
```
vue2使用<svg-icon/>组件
<-icon/>组件是一个可以在Vue2中使用的SVG图标组件,它可以方便地将SVG图标作为组件使用,并且可以很容易地自定义图标的大小、颜色等属性。
首先,你需要安装svg-sprite-loader和svg4everybody这两个依赖包。你可以使用以下命令进行安装:
```
npm install svg-sprite-loader svg4everybody --save-dev
```
然后,在src目录下创建一个icons目录,并将所有的SVG图标放到该目录下。
接着,在src目录下创建一个svg文件夹,用于存放SVG图标的Sprite文件。在svg文件夹下创建一个sprite.svg文件。
然后,在webpack.base.conf.js文件中添加以下代码:
```javascript
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
// ...
module: {
rules: [
// ...
// 配置svg-sprite-loader
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
}
]
},
// ...
}
```
接下来,在src目录下创建一个components目录,并在其中创建一个SvgIcon.vue文件,该文件用于渲染SVG图标。
```html
<template>
<svg :class="svgClass" aria-hidden="true">
<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>
```
最后,在main.js文件中引入svg4everybody,并在Vue实例中注册SvgIcon组件:
```javascript
import 'svg4everybody'
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon', SvgIcon)
```
现在,你可以在Vue组件中使用<svg-icon/>组件来使用SVG图标了。例如:
```html
<template>
<div>
<svg-icon icon-class="search" />
</div>
</template>
```
其中,icon-class属性指定了要使用的SVG图标的名称,该名称与icons目录下的SVG文件名相同。