How to customize size and apply primary color

[patolax]

How do we change the color and size of the icons?

None of these work. style="color: brown;" style="width: 150px; height: 150px"

I am using this in an angular project following instructions in the readme.

[cit-eriks]

I also have the same doubt!!!

Angular Project

[patolax]

@felipeplets @kreuzerk is this package actively maintained?

[kreuzerk]

Yes, but I am not sure if this issue really has to do with this project. I think if you want to colorize the icons you either have to export the icon differently or adjust the svgo config that you pass to svg-to-ts.

[patolax]

@kreuzerk I followed your post and tried this code below. As you can see no change to size or color.

<gm-icons style="color: red;width: 110px; height: 101px" name="achilles"></gm-icons>

I cleaned up the size and fill properties from of svgs in my lib and tried to apply color and size. Still, it did not work.

It would be really nice if you can provide us with proper guidelines as to how to prepare the svgs and how to propagate color and size to them.

Highly appreciate any help.

[JesseZomer]

probably has to do with this: https://github.com/kreuzerk/svg-to-ts/issues/218. See the thread mentioned in https://github.com/kreuzerk/svg-to-ts/issues/218#issuecomment-1625247325 about some weird svgo defaults

[kreuzerk]

Hi @patolax the reason why the icon from the greek mythology library can not be colored is because each path has a hardcoded color in the icon. To color such icons you have to replace the hardcoded colors with the value of currentColor. To do so you can use the following configuration on the svgoConfig -> plugins inside your .svg-to-tsrc.

{
  name: 'convertColors',
  params: {
    currentColor: new RegExp(/#(?!FFFFFF).{6}/),
  }
},