为什么老师的Icon组件只能使用一次呢？
来源：12-8 iconfont 最佳实践
他门说这就是人生
2020-07-13
老师，我发现您的icon组件只能使用一次，第二次就不渲染图标了。
测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试Icon组件是否可用</title>
<script src="./js/vue.global.js"></script>
<script src="../dist/jingsi.data-visual.js"></script>
<style>
.vue-icon {
width: 50px;
height: 50px;
color: purple;
}
</style>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<!-- 原生SVG -->
<div style="width: 50px;height: 50px;display: inline-block;color: aqua;">
<svg width="100%" height="100%" viewBox="0 0 100 100">
<line x1="0" y1="0" x2="100" y2="100" stroke-width="1" stroke="currentColor"/>
<line x1="100" y1="0" x2="0" y2="100" stroke-width="1" stroke="currentColor"/>
</svg>
</div>
<!-- 引用原生SVG, width和height设为0，是为了不显示出来，只被引用就好了 -->
<svg width="0" height="0">
<defs>
<symbol id="icon1" viewBox="0 0 100 100">
<line x1="0" y1="0" x2="100" y2="100" stroke-width="1" stroke="currentColor"/>
<line x1="100" y1="0" x2="0" y2="100" stroke-width="1" stroke="currentColor"/>
</symbol>
</defs>
</svg>
<div style="width: 50px;height: 50px;display: inline-block;color: red;">
<svg width="100%" height="100%">
<use href="#icon1"/>
</svg>
</div>
<!-- SVG的VUE3组件 -->
<svg width="0" height="0">
<defs>
<symbol id="icontimes" viewBox="0 0 100 100">
<line x1="0" y1="0" x2="100" y2="100" stroke-width="1" stroke="currentColor"/>
<line x1="100" y1="0" x2="0" y2="100" stroke-width="1" stroke="currentColor"/>
</symbol>
</defs>
</svg>
<icon name="times" style="width: 50px;height: 50px;color: bisque;"/>
<icon name="times" :clazz="['vue-icon']"/>
<svg width="50px" height="50px" viewBox="0 0 100 100">
<circle r="50" cx="50" cy="50"/>
</svg>
<svg width="0" height="0">
<defs>
<symbol id="iconcircle" viewBox="0 0 100 100">
<circle r="50" cx="50" cy="50"/>
</symbol>
</defs>
</svg>
<icon name="circle" :clazz="['vue-icon']"/>
</div>
<script>
Vue.createApp({
setup() {
return {
message: 'hello world!'
}
}
}).use(DataVisual).mount('#app');
</script>
</body>
</html>这段代码只渲染了的图标，的图标没渲染。这是什么原因呢？
ps:
下面是我的组件：
<template>
<div class="icon-container">
<div class="icon-wrapper" :style="style" :class="clazz">
<svg class="icon">
<use :href="iconId"/>
</svg>
</div>
</div>
</template>
<script>
export default {
name: 'icon',
props: {
name: {
type: String,
default: ''
},
prefix: {
type: String,
default: 'icon'
},
style: {
type: Object,
default: {}
},
clazz: {
type: Array || Object,
default: []
}
},
setup(ctx) {
const iconId = `#${ctx.prefix}${ctx.name}`
return {
iconId
}
}
}
</script>
<style lang="scss" scoped>
.icon-wrapper {
display: inline-block;
.icon {
width: 100%;
height: 100%;
fill: currentColor;
}
}
</style>
<style lang="scss">
.icon-container {
display: inline-block;
}
</style>写回答
1回答
-
同学你好，在icon组件外面套一个元素包裹一下就可以了，在使用时name应该为全称iconcircle和icontimes。如果不能解决你的问题，可以继续追问。
042020-07-15
相似问题