svg-icon
svg-icon copied to clipboard
Improvements and suggestions
First of all, your amazing for creating this..props!!
I do got some improvements I would like to suggest:
- In
<svg..>
useoverflow:hidden
instead ofopacity:0
. - In
<svg..>
addversion="1.1"
. - Put the
<symbol>
elements in<defs>
like described in the SVG 1.1 spec. - Add
title
element in every<symbol>
for accessibility stuff. - Add
class
-attribute on<path>
element .
My current SVG:
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-glass" viewBox="0 0 32 32">
<title>glass</title>
<path class="path1" d="M30.339 3.321q0 0.625-0.768 1.393l-11.286 11.286v13.714h5.714q0.464 0 0.804 0.339t0.339 0.804-0.339 0.804-0.804 0.339h-16q-0.464 0-0.804-0.339t-0.339-0.804 0.339-0.804 0.804-0.339h5.714v-13.714l-11.286-11.286q-0.768-0.768-0.768-1.393 0-0.411 0.321-0.652t0.679-0.313 0.768-0.071h25.143q0.411 0 0.768 0.071t0.679 0.313 0.321 0.652z"></path>
</symbol>
...
</defs>
</svg>
Further more, it would be awesome if people could define their own settings on the website itself.
For example:
- Use
<title>
element or not.. - Setting their own
id
-prefix. Instead ofsi-awesome-500px
it could bemyprefix-500px
. - Whether or not to minify the SVG.
- Use
class
-attribute on<path>
element or not, making it possible to adjust paths with CSS.
Cheers
Thank you very much for your suggestions! Most of the features you mentioned will be ready before 1.0.0
.