Я использую SVG внутри component
с именем 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>
Я добавляю этот компонент в другие vue-component
, чтобы сделать SVG встроенным, как это: -
<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>
У меня более 4 иконок для одного элемента цикла.Когда страница загружается, то я получаю это предупреждение в консоли более 200+ раз, а загрузка страницы занимает больше времени: - WARNING: Too many active WebGL contexts. Oldest context will be lost.
Я делаю что-то не так или есть какой-либо другой безопасный способ загрузить значок SVG внутри v-for
цикл в Vue
?