leungwensen/svg-icon

An ultimate SVG icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.

svg-icon's Issues

Suggest adding new font collections

Hello,

Here are some new font collections, can I request adding please?

CC0 license
project: https://github.com/hyperdexapp/cryptocurrency-icons
SVG files: https://github.com/hyperdexapp/cryptocurrency-icons/tree/master/svg
license: https://github.com/hyperdexapp/cryptocurrency-icons/blob/master/LICENSE.md

SIL Open Font License, version 1.1
Google noto-emoji - includes SVG of large number of emojis
project: https://github.com/googlei18n/noto-emoji
SVG files: https://github.com/googlei18n/noto-emoji/tree/master/svg
license: https://github.com/googlei18n/noto-emoji/blob/master/LICENSE

SIL Open Font License, version 1.1
project: https://github.com/Templarian/MaterialDesign
SVG files: https://github.com/Templarian/MaterialDesign/tree/master/icons/svg
license: https://github.com/Templarian/MaterialDesign/blob/master/LICENSE

Apache 2.0
project: https://github.com/google/material-design-icons
SVG files spread through repo
license: https://github.com/google/material-design-icons/blob/master/LICENSE

MIT license
project: https://github.com/feathericons/feather
SVG files: https://github.com/feathericons/feather/tree/master/icons
license: https://github.com/feathericons/feather/blob/master/LICENSE

MIT license
https://ionicons.com/
project: https://github.com/ionic-team/ionicons
SVG files: https://github.com/ionic-team/ionicons/tree/master/src/svg
license: https://github.com/ionic-team/ionicons/blob/master/LICENSE

MIT license
project: https://github.com/evil-icons/evil-icons
license: https://github.com/evil-icons/evil-icons/blob/master/LICENSE.txt
SVG files: https://github.com/evil-icons/evil-icons/tree/master/assets/icons

SIL OFL 1.1
project: https://github.com/erikflowers/weather-icons
license: https://github.com/erikflowers/weather-icons
SVG files: https://github.com/erikflowers/weather-icons/tree/master/svg

MIT license
project: https://github.com/icons8/flat-color-icons
SVG files: https://github.com/icons8/flat-color-icons/tree/master/svg
license: https://github.com/icons8/flat-color-icons/blob/master/LICENSE.md

MIT license
project: https://github.com/vscode-icons/vscode-icons
license: https://github.com/vscode-icons/vscode-icons/blob/master/LICENSE
SVG files: https://github.com/vscode-icons/vscode-icons/tree/master/icons

MIT license
project: https://github.com/topcoat/icons
license: https://github.com/topcoat/icons/blob/master/LICENSE
SVG files: https://github.com/topcoat/icons/tree/master/svg

remove empty SVG icons provided by lax vendors

like bootstrap/door.svg, bootstrap/key.svg

resolve <defs>

complex SVG icons using <defs> (for reusing paths, enable gradients, etc.) can not be rendered properly if simply replace <svg> into <symbol>. <defs> should be placed just under root level.

let's support all the icon fonts!

see README.md

provide a css file

Request for overview images, one "global" and one per set.

What a collection! Thank you.

1. It would be valuable with a big overview image that simply shows all icons. It could be any file format. It would make sense to have it at bottom of front git page if possible.

1b) ...same per specific set. I.e all icons for, say, "Bootstrap" in one image, and put under that branch.

allow to export and import config

To later change a previously exported configuration, please provide a way to export the current config and later import it again in order to modify.

trim padding of SVG files

SVG icons from different vendors have different padding, solving it.

Ant.design SVG icons

There are more icons here:
https://ant.design/components/icon/

Than there are in this set. Any chance we could get the rest?

Or let me know if I can do this myself and contribute back to the project.

use as custom element

How do you import this into react?

I tried importing this into react and I get an error. Do you have instructions on to import as a component?

Syntax Error in originals-chess-knight.svg

There’s a syntax error in dist/svg/game/originals-chess-knight.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 0h512v512H0z"/>id=&quot;defs4976&quot; /&gt;<path d="M60.81 476.91h300v-60h-300v60zm233.79-347.3l13.94 7.39c31.88-43.62 61.34-31.85 61.34-31.85l-21.62 53 35.64 19 2.87 33 64.42 108.75-43.55 29.37s-26.82-36.39-39.65-43.66c-10.66-6-41.22-10.25-56.17-12l-67.54-76.91-12 10.56 37.15 42.31c-.13.18-.25.37-.38.57-35.78 58.17 23 105.69 68.49 131.78H84.14C93 85 294.6 129.61 294.6 129.61z" fill="#fff"/></svg>

Please note the id="defs4976" />.

`flat-ribbon` is not properly rendered

http://leungwensen.github.io/svg-icon/#flat

complex icons like `logos-*` are not properly rendered

use jsdom instead of phantomjs

the package phantom requires external binary to work, so that the npm install command takes too long to execute.

besides, phantom is too slow.

use as React Component

material-broken-image & material-subdirectory-right are broken

The material icon set 'broken-image' has a huge non-filled, second path that is hundreds of times larger than its viewBox.

The current source at https://www.materialui.co/icon/broken-image doesn't have that problem.

Same for subdirectory-arrow-right, which repeats the arrow.

how to use it to React Project?

if i want to use it to React web Project , what need i do?

Invalid SVG

Closing <path> like so: <path ../>, will make the SVG valid conform W3.

The SVG currently closes the <path> like so: <path..></path>, which gives the error XML tag has empty body.

The FontAwesome "fa-times" icon seems to be missing

Unless I'm just blind.

causing problem for npm install because of large amount of files

when installed as dependency, and use npm install --no-bin-links, the module causes error.

verbose stack RangeError: Maximum call stack size exceeded

create custom elements for svg-icon

• ~~~<si type="ant-wangwang"></si> and~~~
• <svg-icon type="zero-agent"></svg-icon>
• ~~~<si-symbol type="ant-wangwang"></si-symbol> and <svg-icon-symbol type="zero-agent"></svg-icon-symbol>~~~

Improvements and suggestions

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

Font licenses

Hey, that's a great collection you've compiled there. One thing that's preventing me from using it currently, is that the licenses of each font aren't included. Also I wonder if you've made sure, if redistributing the icons that way is compliant with each font's license (I'm not sure if redistribution as SVGs can be considered a derivative work).

It would be great to:

• Include the licenses of each font.
• Check if there is any license preventing redistribution in such a way.
• Clarify that the MIT license applies to your code, but probably not to the fonts / icons in use (perhaps add clarification in the LICENSE file).

icon searching

svg images are not displaying on web page

I have just downloaded ant-appstore svg image from ant-design from your site and then copy-pasted that image in my assets/images folder.

<img src="assets/images/si-sprite.svg" width="26" height="26">

But it is showing nothing on the web page.

What extra things I required in order to make those SVG images visible on the web page.

Why is phantom needed as a dependency?

Why is phantom needed as a dependency instead of devDependency?

My install of svg-icon failed because installing phantomjs-prebuilt needs to call out to the internet, which fails inside our CI environment.

use as Polymer Element

trimming is really slow, should save the mid products

now the data flow is like

sources --separate or copy--> optimised mid products --trim--> final products

the last step is super slow (I have to create a PhantomJS instance to render the SVG to get the real size of the SVG icon and do the transformation)

so the better way to do this is to keep the mid products and the final products at the same time.

Wrong grid used for iconset FontAwesome

Before you compile icons, the icons are sized in a grid. For example 15x14. When compiled to SVG, this grid translates into a viewBox.

So, what I found out is that the viewBoxes for the FontAwesome icon library in your SVG are way bigger than my viewBoxes (mine is compiled manually outside this project, but we basically do the same thing).

Meaning your FontAwesome icons are not compiled from their original grid size, which is 15x14 for the FontAwesome icons. See here.

Now you are wondering, what does it matter or does it even matter....it does!
Why does it matter, I didn't found out yet, but using the wrong grid size results in icons not being shown completely when applying a font-size to it.

Let me explain / show you.

---

In order to size a SVG-icon with font-size (instead of apply an individual width and height to each icon), the following CSS must be applied.

svg:not(:root) {
    overflow  : hidden;
    ...
}

svg {
    display        : inline-block;
    fill           : currentColor;
    height         : 1em;
    position       : relative;
    stroke         : currentColor;
    stroke-width   : 0;
    width          : 1em;
}

// From hereon we can size SVG-icons by just applying a
// `font-size` to it, since the width and height is related
// to it by using `em`.

Now when I use the CSS above in combination with your SVG-icons (the wrong grid and therefor the viewBoxes), I see some icons not being shown completely. See example below:

---

How to fix this? Just apply the correct grid to each icon for each iconset before compiling.
Again, for FontAwesome the original grid size is 15x14.

demo page

Your SVG Icons as pure CSS File

I make a small little PHP tool to transform your SVG Icons to pure CSS, hope you are fine with this an give it a try: https://github.com/phpSoftware/CSS-Leungwensen-Icons

online document

use zfinder as the document server

better homepage

• better information architecture
• better theme
• icons searching
• selected icons previewing
• defined prefix for symbols
• download as a zip file, which includes demo files, SVG sprite and separated icon files.

separate front-end libs and node scripts

like lib/jquery/*

svg: `fill` attribute does work on some icons

Node.js APIs

• separating an existing iconfont project
• packing an SVG symbols file

etc.

more documents

• API for Node.js
• use as React Component
• use as custom element
• use as Polymer Element

etc.

use svgmin to generate svg-sprite files

zero icon: si-zero-color is not showing

Up to 0.8.1

Please, include 8183df2 in to release

Cannot open any svg file in svg tools like Inkscape

Should I be able to open these svg files in tools like Inkscape?

animation for spinners

Information about aria-labelledby

According to various resources (this is just one about the Chrome), adding aria-labelledby to the <symbol> in the SVG makes sure the title-attribute will be read by modern browsers.

But actually adding content to aria-labelledby is not necessary. Screenreader will read the <title>-attribute and skip the content of aria-labelledby.

Therefor, the content of aria-labelledby can be empty.

css for loading spinner is missing

Missin fontawesome icons?

For some reason, I cannot find http://fontawesome.io/icon/times/ in the sprite. Am I looking at the wrong place?