search

antonreshetov / vue-unicons

1000+ Pixel-perfect svg icons for your next project as Vue components
https://antonreshetov.github.io/vue-unicons/
MIT License
1k stars 56 forks source link

there is no method to add gradient colors #51

Open Awaiszeeshan opened 3 years ago

Awaiszeeshan commented 3 years ago

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 2 years ago

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