using svg icons

[mluis]

Hi!

I just installed typicons via NPM on my project. I've been using < i> with class attribute and they work great.

The issue is I can't resize the icon to the adjust to the size of the container itself as it may vary depending on the user's configuration, so I thought of using the SVG icons but can't find a way to use them as

On the build folder of the framework I'm using (ionic) I can see something like typicons.107d077d609efa723916.svg and it seems the only reference to typicon's svg.

How should one use a specific SVG icon based on this?

Thank you.

[stephenhutchings]

I'm not familiar with the specifics of ionic, but the package comes with all the SVG files in the src/svg directory, so you should be able to reference specific SVGs from that location.

[mluis]

Thank you for your comment. I was able to reference specific SVGs from a specific location. Would you let me know of a proper way to change the SVG image color? As per search results I tried the CSS property fill but it didn't had any effect.

[stephenhutchings]

If you are inlining the SVG into the document, you can set the fill property on the <svg> element and the content should inherit the colour accordingly.

<svg fill="red">...</svg>

<!-- or -->

<svg style="fill: red">...</svg>

<!-- or -->

<svg class="icon-red">...</svg>
<style>.icon-red { fill: red; }</style>

If you are including the SVG as an <img> element, or using CSS background-image, you won't be able to change the colour using the fill property. If you use the webfonts provided, you set the color property instead.

[mluis]

I see, so inlining the SVG document in this case won't be much of a practical approach. The < img> tag wont work to change the color. Perhaps if the webfonts grow and shrink proportionally with the container I can drop the SVG approach and use webfonts instead.

Do you think using a proportional font scaling would be something feasible to what I'm trying to achieve? Do you have any thoughts on how to make this work?

[stephenhutchings]

I don't know enough about your particular setup, but I don't see why inlining SVG wouldn't be practical. If you're trying to have the icon scale fluidly based on the size of the parent element, it is definitely the way to go.

I don't think you would be able to replicate that with a web font without relying on some Javascript to set the font-size of the icon based on the em-width of the parent.

You can find a lot of useful information on CSS Tricks if you need more info.

[mluis]

Thank you for your useful help.

Inlining the SVG would solve an issue like this. In my scenario I receive a filename, for example of a SVG icon. If it is possible to load that icon based on the filename and also modify the color of the icon the problem is solved.

The issue is < img> has the [src] attribute to load the file but can't modify the color. Inlining < svg> can modify the color but can it load the icon SVG file like img's [src]?

[stephenhutchings]

SVG can load a document fragment using the <use> tag, but that would require an ID in the source file to target, so you would have to add one to each file, which isn't really practical.

If you are really unable to include the SVG inline in the document, one work-around could be to use the CSS mask-image property, although this isn't supported in all browsers.

.icon {
  -webkit-mask-image: url(/path-to-icon.svg);
  -webkit-mask-size: 100% 100%;
  mask-image: url(/path-to-icon.svg);
  mask-size: 100% 100%;
}

I'm going to close this issue now as this isn't an issue specific to Typicons.