Adding attributes

Attributes have been added with Iconamic v1.1.1.

The Iconamic tag makes it easy to add attributes to your SVG icons from within your templates. This makes adding attributes - such as a specific class - trivial.

When using the Iconamic tag, simply add the attributes to the tag, and Iconamic will handle the rest:

This will add the class and stroke-width attributes to your icon svg.

Remember, Iconamic will always overwrite existing attributes - the exception is class, but keep reading for more about that.

Attribute names

Attributes should be added exactly as you want them to appear. Attributes that require kebab case should be entered as so, and those with capitals for each subsequent word, use those correctly too.

For example:

Will correctly return:

Appending to the class attribute

When you add the class attribute, Iconamic will append whatever you provide to the existing class value.

This is convenient for when you want to keep your icon's base class properties, but want to add a new one.

For example, your icon may have:

Adding class="text-blue-500" to the Iconamic tag will append the text-blue-500 to the existing class properties.

If you need one of your newly added classes to take priority, you can use important - in Tailwind, prepend your class name with ! such as !text-blue-500, or for your own custom CSS, you can !important the properties you want to be changing in your class declaration.

Replacing the class attribute

There may be times when you want to replace the class attribute too. This will overwrite your icon's existing class attribute with something totally different. This way, you won't need to use the important approach noted above.

You can use the classReplace attribute to overwrite the existing class. This attribute name will not be added to your icon - it is a special case that will replace your icon's existing class, or add it if it doesn't exist.

With a simple icon:

And the tag including classReplace:

Will result in:

You can also use classReplace and class together too - the existing class will be replaced first (classReplace), and then your class will be appended to that. This has been included to ensure an expected behaviour just in case you provide both attributes in a tag.