Allow to set a class to the use tag inside the svg-icon component

[1001v]

Hello. The external svg file appears in the document inside the closed shadow dom, when we require it via use tag. This doesn't allow us to customize the svg style using css, but it's still can be done by applying a class to the use tag. Please add a property to the svg-icon component, so we could apply a class to the svg inside shadow dom. Some details are described here: https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/. Thank you.

[farnabaz]

Hi, The module adds an id to each icon inside shadow dom if you want to change styles of an icon in a specific location, just wrap svg-icon inside another tag:

<span class="specific-icon">
  <svg-icon name="test" />
</span>
<style>
.specific-icon #i-test {
  fill: blue;
}
</style>

Also if you have multicolor svg image, module keep tags calss attribute and you can use those classes

[1001v]

@farnabaz hi, thanks for your response. At some point your example doesn't work for me. I have the following structure:

UPD: I've managed to do it like this: .finger-icon { use { fill: #777 !important; } } But i'm still not able to fill a particular path inside svg.

[farnabaz]

@1001v Could you create an online demo in codesandbox?

[AndrewBogdanovTSS]

@farnabaz I agree that it would be cool to have some standardized solution for changing the color of internal paths of the SVG, similarly to how it was done here https://mmf-fe.github.io/vue-svgicon/v3/ As you can see they use color property that can accept array of values: colors: '#FBAD20 #F5EB13 #B8D433 #6BC9C6 #058BC5 #34469D #7E4D9F #C63D96 #ED1944'

[farnabaz]

@AndrewBogdanovTSS I don't think this will possible in SVG sprites

[AndrewBogdanovTSS]

Ah, I see what you mean, it will require template parsing...

[MoonCheung]

@farnabaz My project will involve multi-color ICONS with multiple color paths that cannot be modified. With the same problem, how to modify monochrome from SVG

The following scss style：

[AndrewBogdanovTSS]

@MoonCheung just change your fill values to fill="currentColor"

[MoonCheung]

@MoonCheung just change your fill values to fill="currentColor"

There are so many fill properties, how do I specify a single fill property to change the color, but do I need a multi-color icon

[AndrewBogdanovTSS]

I don't understand what you want. You want a single colored icon that can be controlled externally or you want a multicolored icon? If you want a multicolored icon - how should it change color?

[MoonCheung]

@AndrewBogdanovTSS Yes, I want to change the multicolor icon.But how does discovering multiple fill properties in SVG change the color?

[AndrewBogdanovTSS]

When do you want to change it? On hover? Do you want to change it to a single color?

[MoonCheung]

When do you want to change it? On hover? Do you want to change it to a single color?

No, first of all, how do you change a single color icon to a multi-color icon and that's the point

[AndrewBogdanovTSS]

@MoonCheung I asked you 2 very specific questions. Can you answer those?

[AndrewBogdanovTSS]

No, first of all, how do you change a single color icon to a multi-color icon and that's the point

The answer is simple - you can't. This lib wasn't built for such purposes

[MoonCheung]

@AndrewBogdanovTSS Sorry, I can't express clearly the above question, which means multiple single icon colors, not a single icon color but I think the svg-icon component can change the colors of multiple monochrome ICONS to multiple different icon colors SVG icon:

...
<svg t="1584978480349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7755" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs>
  <path ...省略 fill="var(--weibo-color-1)" p-id="7756"></path>
  <path ...省略 fill="var(--weibo-color-2)" p-id="7757"></path>
  <path ...省略 fill="var(--weibo-color-3)" p-id="7758"></path>
  <path ...省略 fill="var(--weibo-color-4)" p-id="7759"></path>
</svg>

scss file:

.weibo-icon {
    &>.icon{
        --weibo-color-1:#9E9E9E;
        --weibo-color-2:#9E9E9E;
        --weibo-color-3:#9E9E9E;
        --weibo-color-4:#9E9E9E;

      &:hover {
          --weibo-color-1:#E71F19;
          --weibo-color-2:#F5AA15;
          --weibo-color-3:#F5AA15;
          --weibo-color-4:#040000;
      }
    }
}

So the above code can be implemented, who has a better solution than these?

[AndrewBogdanovTSS]

@MoonCheung the example you provided here has nothing to do with the nuxt svg-sprite-module. It's obvious that you can manipulate SVGs internal content with some data and apply some colors on top or create an animation or a filter effect. But that will require you to manually do this to all of your icons which means that no library features is used in the process. You can do exactly the same without the lib, so my answer is the same - your request lies beyond the features of this library. and it has nothing to do with this lib

[MoonCheung]

@AndrewBogdanovTSS Thank you for your answer

[AndrewBogdanovTSS]

@MoonCheung I recommend you looking into using this lib instead https://mmf-fe.github.io/vue-svgicon/v3 I guess it will better fit your purposes