devicons / devicons/devicon

[FEATURE REQUEST] Removing `style=""` in SVG files

Open
#1,299 4 comments 4 reactions 0 assignees View on GitHub
enhancement
Dominant language
CSS
Stars
11.8k
Forks
2.4k
Avg merge
5d 4h
Merged PRs (30d)
3

Description

### I have searched through the issues and didn't find my problem.

- [X] Confirm

### Problem

Currently there is more than 100 SVG files that contains the syntax `style="SOME_STYLING"`.
This syntax can lead to errors, issues or buggy situations.

### Why

Because the SVGs are used to generate a font, to ensure quality, reduce potential bugs on SVGs, I think configuration should be done only via HTML attributes.

For SVG files, only HTML **Presentation Attributes** ( [list here](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) ) should be used.

So instead of this:
```html
style="fill-rule:evenodd;clip-rule:evenodd;"
```
we should have that:
```
fill-rule="evenodd" clip-rule="evenodd"
```

### Possible Solution

Following this issue : #1277 there is possibility to convert the `style=""` syntax to attributes via a `convertStyleToAttrs.js` script.

Maybe also in guidelines ( https://github.com/devicons/devicon/wiki/SVG-Standards ) it's needed to add a line to specifically tell that inline style (`style=""`) on elements are not the best pratice and link / display a list of **Presentation Attributes** that can be set / used.
Here a list of safe attributes that will be correctly interpreted by icomoon for the font and of course web browsers.
```
clip-path
clip-rule
fill
fill-opacity
fill-rule
opacity
stop-color
stop-opacity
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
```

### Additional information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.