Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://leungwensen.github.io/svg-icon/
An ultimate SVG icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.
https://leungwensen.github.io/svg-icon/
icon-collections icon-font svg-icons svg-sprites
Last synced: about 2 months ago
JSON representation
An ultimate SVG icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.
- Host: GitHub
- URL: https://leungwensen.github.io/svg-icon/
- Owner: leungwensen
- License: mit
- Created: 2016-05-04T02:33:42.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-07-09T03:35:42.000Z (over 2 years ago)
- Last Synced: 2024-11-05T03:42:13.745Z (2 months ago)
- Topics: icon-collections, icon-font, svg-icons, svg-sprites
- Language: JavaScript
- Homepage: https://leungwensen.github.io/svg-icon/
- Size: 37.9 MB
- Stars: 1,055
- Watchers: 33
- Forks: 118
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ant-design - Ant Design SVG Icons - Project to transform regular icon fonts into SVG format, supporting Ant Design icon fonts. (Resources)
README
svg-icon
========
An ultimate svg icons collection DONE RIGHT, with **over 10,000 SVG icons** out of the box.
## [Homepage][homepage]
## Download
You can download as many SVG icons as you need in [homepage][homepage], or download the whole collection via `npm`:
```shell
npm install svg-icon --save
```
## custom element
files:
```
dist/
├── svg-icon-element.js
└── svg-icon-element.css
```
usage:
```
```
limitation:
* [Can I use custom elements?](http://caniuse.com/#search=custom%20elements)
* [webcomponentsjs](https://github.com/webcomponents/webcomponentsjs)
## use it locally
```shell
# clone the project
git clone https://github.com/leungwensen/svg-icon.git
# install dependencies
cd svg-icon
npm i
# startup a local server
gulp
```
## SVG icon collections
name | id prefix | source | supported
----|----|----|----
ant-design | ant- | http://ant.design/#/components/icon | yes
bootstrap | bootstrap- | https://github.com/twbs/bootstrap | yes
devicons | dev- | https://github.com/vorillaz/devicons | yes
elusive-iconfont | elusive- | https://github.com/reduxframework/elusive-iconfont | yes
entypo | entypo- | https://github.com/danielbruce/entypo | yes
evil-icons | evil- | https://github.com/outpunk/evil-icons | yes
flag-icon | flag- | https://github.com/lipis/flag-icon-css | yes
flat-ui | flat- | https://github.com/designmodo/Flat-UI | yes
font-awesome | awesome- | https://github.com/FortAwesome/Font-Awesome | yes
foundation | foundation- | https://github.com/zurb/foundation-icon-fonts | yes
game-icons | game- | https://github.com/game-icons/icons | yes
geomicons-open | geom- | https://github.com/jxnblk/geomicons-open | yes
icomoon-free | icomoon- | https://github.com/Keyamoon/IcoMoon-Free | yes
ioncons | ionic- | https://github.com/driftyco/ionicons | yes
maki | maki- | https://github.com/mapbox/maki | yes
map-icons | map- | https://github.com/scottdejonge/map-icons | yes
material-design | material- | https://github.com/google/material-design-icons | yes
metro-ui-css | metro- | https://github.com/olton/Metro-UI-CSS | yes
mfglabs-iconset | mfglabs- | https://github.com/MfgLabs/mfglabs-iconset | yes
octicons | oct- | https://github.com/primer/octicons | yes
open-iconic | open- | https://github.com/iconic/open-iconic | yes
payment-font | payment- | https://github.com/vendocrat/PaymentFont | yes
payment-webfont | payment-web- | https://github.com/orlandotm/payment-webfont | yes
semantic-ui | (oct-/awesome-) | https://github.com/Semantic-Org/Semantic-UI/ | yes
simple-icons | simple- | https://github.com/danleech/simple-icons | yes
subway | subway- | https://github.com/mariuszostrowski/subway | yes
typicons | typcn- | https://github.com/stephenhutchings/typicons.font | yes
weather-icons | weather- | https://github.com/erikflowers/weather-icons | yes
windows-icons | windows- | https://github.com/Templarian/WindowsIcons | yes
zero | zero- | src/zero | yes
zocial | zocial- | https://github.com/smcllns/css-social-buttons | yes
logos(svg porn) | logos- | http://svgporn.com | yes
Need more? Please leave an [issue][issues] or a [pull request][pull-requests].
## Build your own collection
### 1. Install `svg-icon` via `npm`:
```shell
npm install svg-icon -g
```
### 2. Define a collection file (JSON format, [demo](https://github.com/leungwensen/svg-icon/blob/master/src/collection/zfinder.json))
### 3. Build it:
```shell
svg-icon build --source $path/to/icons.json --target $path/to/dest --name wow
```
Now you have a SVG sprite file and a demo page.
```
$path/to/dest/wow/
├── index.html
└── svg-symbols.svg
```
## Contribute
### How did you collect all these SVG icons?
There are basically two kinds of icon collections, ones with SVG source files, and others with only icon fonts.
* Those with SVG source files: I simply copy the icons to the dest folder, optimise them, trim the pads around every icon, and build an SVG sprite file from them.
* Those with icon fonts: I need to separate every icon from a combined SVG font file(locating, transforming, etc.), optimise them, trim them, and build an SVG sprite.
So the data flow is like:
```
Sources(SVG icons/icon fonts) ---separating/copying---> SVG icons ---optimising---> mid products(dist/svg/*) ---trimming---> final products(dist/trimmed-svg/*) ---building---> SVG sprite
```
### Is the contributing toolchain ready for me?
Yes, and no.
The collection of 10,000+ SVG icons is mostly collected by nodejs scripts(check out these folders for details `bin/`, `gulp` and `lib` ). But I still have to write some code when I want to add icons from a new vendor into this project, because of the uncertainty of icon collections.
If you are familiar with nodejs and SVG, and interested in making this collection more useful, please leave a [PR][pull-requests]. Feel free to contact me if you have any question.
Of course, the quickest way to add your favorite icons here is to leave an [issue][issues], and let me do the rest for you ;-).
## References
### Projects inspired `svg-icon`
* [evil-icons](https://github.com/outpunk/evil-icons)
* [Font-Awesome-SVG-PNG](https://github.com/encharm/Font-Awesome-SVG-PNG)
### Projects powered `svg-icon`
* [svgo](https://github.com/svg/svgo): transforming and optimizing SVG icons would be impossible without this awesome project.
* [vinyl-fs](https://github.com/gulpjs/vinyl-fs): `gulp` and `vinyl-fs` helped me to process large amount of files without any pain.
* [phantomjs](http://phantomjs.org/): it is the answer of lots of problems.
* [a lot more](https://github.com/leungwensen/svg-icon/blob/master/package.json#L22)
## [Known issues][issues]
[homepage]: http://leungwensen.github.io/svg-icon/ "homepage"
[issues]: https://github.com/leungwensen/svg-icon/issues "issues"
[pull-requests]: https://github.com/leungwensen/svg-icon/pulls "pull requests"