export svg icons usable in wordpress like webicons

[ATTk20]

Hello, 

I would like to create some icons for a website (Wordpress with Elementor) whose color is changeable in Wordpress. So like the iconsets from e.g. Font Awesome. I have the icons as svg files, but whenever I upload them to wordpress, the color is no longer changeable in wordpress. 

I once found a tutorial for this and also solved this problem, but I've been looking for it for hours but can't find it anymore and can't get any further. 

Does anyone have an idea? There must be some people who design icons for the web who have this problem. 

Thanks in advance! 😎

[v_kyr]

2 hours ago, ATTk20 said:

Does anyone have an idea?

Of course, do a Google etc. search after that topic on the net!

• Can you change the color of svg icons to the global color I choose from Wordpress?
• How can I make my Admin Icon SVG color correctly?
• How to Change Custom SVG Icons Color in Elementor?
• ... and so on ...
• wordpress SVG icons color  <--- ***

[ATTk20]

If you don't have the answer, please stop posting nonsense. None of your links helps in any way. 

[v_kyr]

1 hour ago, ATTk20 said:

If you don't have the answer, please stop posting nonsense. None of your links helps in any way. 

First of all don't be rude here if people are going to help you at all! - Second check the links more carefully and read through the contents they point here.

• Create a Icon Library.pdf

[Lee D]

@ATTk20 Remember that most replies come from other Affinity users and are trying to help/point you in the right direction. If you look at the links @v_kyr provided they'll help you, as it will require additional CSS added to the SVG files.

[Hangman]

Hi @ATTk20,

If your intention is simply to be able to change the colour of the SVG icons as a whole, rather than individual parts of each icon, then an alternative and easier approach would be to use CSS filters which will allow you to target the SVG file as an image element...

HTML

    <div class="row">
        <div class="column icon">
            <img class="svgcolour" src="media/android.svg" alt="android">
        </div>
        <div class="column icon">
            <img class="svgcolour" src="media/instagram.svg" alt="instagram">
        </div>
        <div class="column icon">
            <img class="svgcolour" src="media/twitter.svg" alt="twitter">
        </div>
        <div class="column icon">
            <img class="svgcolour" src="media/skype.svg" alt="skype">
        </div>
    </div>

CSS

.svgcolour {
    filter: invert(55%) sepia(100%) saturate(50) hue-rotate(0deg) brightness(100%) contrast(100%);
}

You can then apply any of the eleven CSS filters, blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow and url...

If you start with black svg icons and then use the invert() filter, chain the sepia() filter to it along with saturate(), hue-rotate(), brightness() and contrast() you have a lot of flexibility...

The hue-rotate values are the same as Affinity apps, i.e., Red = 0°, Orange = 30°, Yellow = 60° and so on...