leungwensen / svg-icon Goto Github PK
View Code? Open in Web Editor NEWAn ultimate SVG icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.
Home Page: https://leungwensen.github.io/svg-icon/
License: MIT License
An ultimate SVG icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.
Home Page: https://leungwensen.github.io/svg-icon/
License: MIT License
see README.md
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:
LICENSE
file).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.
etc.
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.
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
.
Please, include 8183df2 in to release
SVG icons from different vendors have different padding, solving it.
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
What a collection! Thank you.
1b) ...same per specific set. I.e all icons for, say, "Bootstrap" in one image, and put under that branch.
Should I be able to open these svg files in tools like Inkscape?
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.
I tried importing this into react and I get an error. Do you have instructions on to import as a component?
if i want to use it to React web Project , what need i do?
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.
like lib/jquery/*
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.
when installed as dependency, and use npm install --no-bin-links
, the module causes error.
verbose stack RangeError: Maximum call stack size exceeded
First of all, your amazing for creating this..props!!
I do got some improvements I would like to suggest:
<svg..>
use overflow:hidden
instead of opacity:0
.<svg..>
add version="1.1"
.<symbol>
elements in <defs>
like described in the SVG 1.1 spec.title
element in every <symbol>
for accessibility stuff.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:
<title>
element or not..id
-prefix. Instead of si-awesome-500px
it could be myprefix-500px
.class
-attribute on <path>
element or not, making it possible to adjust paths with CSS.Cheers
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
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="defs4976" /><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" />
.
etc.
the package phantom
requires external binary to work, so that the npm install
command takes too long to execute.
besides, phantom
is too slow.
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.
For some reason, I cannot find http://fontawesome.io/icon/times/ in the sprite. Am I looking at the wrong place?
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 zfinder as the document server
<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>
~~~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.
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
.
like bootstrap/door.svg
, bootstrap/key.svg
Unless I'm just blind.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.