举个例子,以下为一个svg文件的代码
<svg t="1740016684352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1210" width="200" height="200"><path d="M395.345 121.194l62.089 93.08a112.63 112.63 0 0 1 8.82 109.083l-38.29 84.24a18.875 18.875 0 0 0-1.415 10.494c5.826 37.915 27.696 75.83 65.612 113.746 37.915 37.915 75.83 59.786 113.746 65.612 3.56 0.545 7.2 0.042 10.493-1.415l84.24-38.291a112.63 112.63 0 0 1 109.084 8.82l90.967 60.645c50.494 33.664 65.038 101.044 33.676 152.372l-3.154 4.88-82.874 118.404c-24.514 35.01-66.734 53.123-108.991 46.719C581.602 925.905 437.262 848.6 306.33 717.668 175.397 586.736 98.092 442.396 74.415 284.65c-6.404-42.257 11.71-84.477 46.719-108.991l117.351-82.146c50.96-35.672 121.189-23.279 156.86 27.68z m-76.327 50.61c-6.494-7.424-17.315-9.371-25.983-4.697l-2.119 1.307-117.34 82.138c-6.573 4.602-9.961 12.505-8.745 20.527 20.649 137.571 88.537 264.328 206.148 381.94C488.591 770.63 615.348 838.517 753.047 859.185a21.043 21.043 0 0 0 18.915-6.878l1.473-1.871 81.806-116.887 1.28-1.975 0.956-1.77c3.989-8.584 1.714-18.925-5.575-25.076l-1.927-1.447-90.967-60.645a21.203 21.203 0 0 0-18.273-2.536l-2.261 0.875-85.086 38.67a110.324 110.324 0 0 1-61.366 8.17c-59.107-9.08-113.826-40.644-164.511-91.33-50.685-50.684-82.248-105.403-91.334-164.54-2.934-19.135-0.753-38.606 6.461-57.149l2.092-5.033 38.291-84.24a21.203 21.203 0 0 0-0.424-18.43l-1.223-2.085-61.173-91.697-1.183-1.509z" fill="#576176" p-id="1211"></path></svg>
博主封装了一个svg的组件,内容如下
<template>
<svg :style="{width, height}">
<use :xlink:href="prefix + name" :fill="color"></use>
</svg>
</template>
<script setup lang="ts">
defineProps({
//xink:href的前缀
prefix: {
type: String,
default: '#icon-'
},
//图标名称
name:String,
// 接受父组件传递:颜色值
color: {
type: String,
default: ''
},
// 接受父组件传递:宽度
width: {
type: String,
default: '16px'
},
// 接受父组件传递:高度
height: {
type: String,
default: '16px'
}
})
</script>
<style>
</style>
传递fill属性时,使用该svg失效,原因是因为原svg代码中已经包含了fill属性,删除该内容即可,
删除后可正常修改fill属性