我在名为component的{{1}}中使用SVG，如下所示：-
SvgIcons.vue我将此组件添加到其他<template>
<div class="svg__icon" v-if="iconType">
<svg :height="dimension" :width="dimension" v-if="iconType == 'rss_icon'" xmlns=" "
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 11.968">
<g id="blogpost_icon_active" transform="translate(-77 -178)">
<g id="Group_42" data-name="Group 42" transform="translate(77 178)">
<ellipse :class="className" id="Ellipse_25" data-name="Ellipse 25" class="cls-1" cx="1.641" cy="1.641" rx="1.641" ry="1.641" transform="translate(0 8.649)"/>
<path :class="className" id="Path_135" data-name="Path 135" class="cls-1" d="M1308,266.988v2.279a5.583,5.583,0,0,1,3.957,1.6,5.48,5.48,0,0,1,1.641,3.957h2.334a7.726,7.726,0,0,0-7.932-7.841Z" transform="translate(-1308 -262.897)"/>
<path :class="className" id="Path_136" data-name="Path 136" class="cls-1" d="M1308,246.873v-2.3a11.951,11.951,0,0,1,8.37,3.374,12.4,12.4,0,0,1,3.629,8.589h-2.316a10.124,10.124,0,0,0-2.845-6.82A9.654,9.654,0,0,0,1308,246.873Z" transform="translate(-1308 -244.57)"/>
</g>
</g>
</svg>
</div>
</template>
<script>
export default {
props: ['iconType', 'className', 'dimension'],
methods: {
},
computed: {
},
created () {
console.debug(this.iconType)
}
}
</script>
中，以如下方式内嵌SVG：-
vue-component我有4个以上的图标用于单个循环项。
当页面加载页面时，我在控制台中收到此警告超过200次以上，并且页面需要花费更多时间才能完全加载：-
<div class="article_box_grid only_article_box_grid" :key="'grid_' + post._source.id "
v-for="(post, index) in getPosts">
......Other code......
<svg-icons iconType="rss_icon" dimension="14" className="orangeColor"></svg-icons>
</div>
我是在做错什么吗，还是有其他安全方法可以在WARNING: Too many active WebGL contexts. Oldest context will be lost.的{{1}}循环内加载SVG图标？