there is no method to add gradient colors
Awaiszeeshan opened this issue · 1 comments
Awaiszeeshan commented
hi, i couldn't find a way to fill the icon with the gradient colors,
if there is a method kindly guide me through the steps
DanielTerletzkiy commented
Something like this should work.
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
<linearGradient :id="uniqueId" x1="0%" y1="0%" x2="100%" y2="0%"
v-if="gradient">
<stop v-for="{offset, color} in gradient" :key="offset" :offset="offset+'%'"
:stop-color="color"/>
</linearGradient>
</svg>
<unicon :name="name" :width="size" :height="size" :fill="`url(#${this.uniqueId}) ${color}`"/>
Replace uniqueId with a id/key that is both present on the linearGradient and unicon -> fill tags.
gradient is an array of objects and could look like this:
[
{offset: 0, color: '#fff'},
{offset: 100, color: '#000'},
]
gradientRotation is the rotation of the gradient in deg