vue-unicons icon indicating copy to clipboard operation
vue-unicons copied to clipboard

there is no method to add gradient colors

Open Awaiszeeshan opened this issue 3 years ago • 1 comments

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

Awaiszeeshan avatar Aug 10 '21 05:08 Awaiszeeshan

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

DanielTerletzkiy avatar Mar 13 '22 22:03 DanielTerletzkiy