svg-icon icon indicating copy to clipboard operation
svg-icon copied to clipboard

Improvements and suggestions

Open Tklaversma opened this issue 8 years ago • 1 comments

First of all, your amazing for creating this..props!!

I do got some improvements I would like to suggest:

  1. In <svg..> use overflow:hidden instead of opacity:0.
  2. In <svg..> add version="1.1".
  3. Put the <symbol> elements in <defs> like described in the SVG 1.1 spec.
  4. Add title element in every <symbol> for accessibility stuff.
  5. 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:

  1. Use <title> element or not..
  2. Setting their own id-prefix. Instead of si-awesome-500px it could be myprefix-500px.
  3. Whether or not to minify the SVG.
  4. Use class-attribute on <path> element or not, making it possible to adjust paths with CSS.

Cheers

Tklaversma avatar Aug 05 '16 20:08 Tklaversma

Thank you very much for your suggestions! Most of the features you mentioned will be ready before 1.0.0.

leungwensen avatar Aug 06 '16 00:08 leungwensen