Changing the color of an SVG icon

#1

Hi,

is there a way to change the color of an SVG icon in Antetype? Otherwise I would have to generate three icons for each icon button: blueish grey for normal, black for hover and blue for pressed.

These would be a lot of icons to generate.

Thanks for your time!

Carlos

#2

Yes, you can. In the CSS field, use a css filter. This will work best for monochrome icons, obviously. Here’s a useful tool if you need colours rather than black and white:

1 Like
#3

You could also paste the svg code in the html field of the style inspector and change the color in the code.

#4

Thanks for your answers. Could you give me an answer for a dummy, though? For example, if I want to color an icon with the HEX value “424747”, what should I write exactly in the CSS or the html field?
Sorry and thank you!

#5

enter the colour-value:

image
image1408Ă—542 81 KB

and copy the filter-string into the css-field

image
image1418Ă—530 61.3 KB

image
image2144Ă—1292 342 KB

svg-filter.zip (146.0 KB)

1 Like
#6

SVG Fill test.atype.zip (133.4 KB) It would be cool if you could target the fill attribute of the embedded svg from within antetype. Then, you could set its colour in the css field, using the fill attribute. Like in this example:

<svg id="fe3c8dda-16da-41aa-8c65-8880b97a39fc" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="94" height="73" viewBox="0 0 94 73">
  <g>
    <rect x="0.5" y="0.5" width="93" height="72" fill="currentColor"/>
    <path d="M93,1V72H1V1H93m1-1H0V73H94V0Z"/>
  </g>
</svg>

It works if you paste the code into the HTML editor but with larger svgs, it will be a bit unwieldy.

#7

The workaround with CSS filter works fine, but would be nice to have a simpler tint solution for this in the UI. Anything planned in this direction?

#8

Unfortunately there is nothing new on this topic.
But instead of a CSS filter I would suggest using the fill property in the custom CSS field.
css fill.zip (111.5 KB)

3 Likes
#9

Thanks. Much leaner then the CSS filter :+1:

#10

I tried the example above, but it doesn’t work. The CSS property (fill) will not be applied.

#11

Oh I got it. Just remove all fill attributes out of the HTML.

1 Like