A easy process to create an icon library in SVG-format, that can be manipulated by CSS-files

[mimuel]

Hi,
I found an interesting solution for creating an icon library with affinity designer.

The icons can be manipulated globally with a CSS file.

The effort is relatively low.

Simply comment in an interest then I will describe the process here in the forum in detail. 

michael

[Jakerlund]

@mimuel yes absolutely

I want to export simple icons to be used in a html page and be able to change fill color in css.

Cheers

[mimuel]

OK - please wait a moment. The tutorial I have made is written in german language. After translate the tutorial I will public the pdf here.

[mimuel]

Hi Jakerlund,

here is the tutorial - sorry my software-dialogs are not english.

Please give me a feedback.

Cheers

Create a Icon Library.pdf

[Jakerlund]

Thanks @mimuel I'm going to test this tomorrow.

Thanks for sharing 

[Jakerlund]

@mimuel My problem is that i needed the SVG's to work in Wordpress with Elementor.
But... since i'm using JetElements i can use plain SVG's and the inline SVG widget which can remove Inline CSS and use custom colors in Elementor for my flat icons.

Your workaround will be appreciated when using traditional HTML/CSS though

Thanks for sharing!

[mimuel]

But I think outline-styles in a CSS is the better alternative

[mimuel]

At HTML5 you can call the SVG with this command:

        <object data="my_svg.svg" type="image/svg+xml"></object>

the svg himsef can include a inline-style or a reference to a outline-style CSS-File

 

[César Del Rivero]

@mimuel Thanks for sharing !

 

[Kylian00]

You can create an SVG icon library that can be manipulated by CSS files using three approaches:

SVG sprites & CSS background-position

SVG sprites & fragment identifiers

CSS masks