An ultimate SVG icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.
MIT License
An ultimate svg icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.
You can download as many SVG icons as you need in homepage, or download the whole collection via npm
:
npm install svg-icon --save
files:
dist/
svg-icon-element.js
svg-icon-element.css
usage:
<svg-icon url="http://leungwensen.github.io/svg-icon/dist/sprite/symbol/logos.svg" type="si-logos-javascript"></svg-icon>
limitation:
# clone the project
git clone https://github.com/leungwensen/svg-icon.git
# install dependencies
cd svg-icon
npm i
# startup a local server
gulp
Need more? Please leave an issue or a pull request.
svg-icon
via npm
:npm install svg-icon -g
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
There are basically two kinds of icon collections, ones with SVG source files, and others with only icon fonts.
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
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. 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, and let me do the rest for you ;-).
svg-icon
svg-icon
gulp
and vinyl-fs
helped me to process large amount of files without any pain.