{"id":13397979,"url":"https://github.com/leungwensen/svg-icon","last_synced_at":"2025-05-15T10:06:52.756Z","repository":{"id":43919909,"uuid":"58017004","full_name":"leungwensen/svg-icon","owner":"leungwensen","description":"An ultimate SVG icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.","archived":false,"fork":false,"pushed_at":"2022-07-09T03:35:42.000Z","size":39764,"stargazers_count":1075,"open_issues_count":21,"forks_count":120,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-05-13T18:44:28.934Z","etag":null,"topics":["icon-collections","icon-font","svg-icons","svg-sprites"],"latest_commit_sha":null,"homepage":"https://leungwensen.github.io/svg-icon/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leungwensen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-04T02:33:42.000Z","updated_at":"2025-05-01T17:53:37.000Z","dependencies_parsed_at":"2022-08-12T10:51:57.970Z","dependency_job_id":null,"html_url":"https://github.com/leungwensen/svg-icon","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leungwensen%2Fsvg-icon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leungwensen%2Fsvg-icon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leungwensen%2Fsvg-icon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leungwensen%2Fsvg-icon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leungwensen","download_url":"https://codeload.github.com/leungwensen/svg-icon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319720,"owners_count":22051073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["icon-collections","icon-font","svg-icons","svg-sprites"],"created_at":"2024-07-30T18:01:59.631Z","updated_at":"2025-05-15T10:06:47.745Z","avatar_url":"https://github.com/leungwensen.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Archive of Icons","Icons"],"sub_categories":[],"readme":"svg-icon\n========\n\nAn ultimate svg icons collection DONE RIGHT, with **over 10,000 SVG icons** out of the box.\n\n## [Homepage][homepage]\n\n## Download\n\nYou can download as many SVG icons as you need in [homepage][homepage], or download the whole collection via `npm`:\n\n```shell\nnpm install svg-icon --save\n```\n\n## custom element\n\nfiles:\n\n```\ndist/\n    ├── svg-icon-element.js\n    └── svg-icon-element.css\n```\n\nusage:\n\n```\n\u003csvg-icon url=\"http://leungwensen.github.io/svg-icon/dist/sprite/symbol/logos.svg\" type=\"si-logos-javascript\"\u003e\u003c/svg-icon\u003e\n```\n\nlimitation:\n\n* [Can I use custom elements?](http://caniuse.com/#search=custom%20elements)\n* [webcomponentsjs](https://github.com/webcomponents/webcomponentsjs)\n\n## use it locally\n\n```shell\n# clone the project\ngit clone https://github.com/leungwensen/svg-icon.git\n# install dependencies\ncd svg-icon\nnpm i\n# startup a local server\ngulp\n```\n\n## SVG icon collections\n\nname | id prefix | source | supported\n----|----|----|----\nant-design       | ant-            | http://ant.design/#/components/icon                | yes\nbootstrap        | bootstrap-      | https://github.com/twbs/bootstrap                  | yes\ndevicons         | dev-            | https://github.com/vorillaz/devicons               | yes\nelusive-iconfont | elusive-        | https://github.com/reduxframework/elusive-iconfont | yes\nentypo           | entypo-         | https://github.com/danielbruce/entypo              | yes\nevil-icons       | evil-           | https://github.com/outpunk/evil-icons              | yes\nflag-icon        | flag-           | https://github.com/lipis/flag-icon-css             | yes\nflat-ui          | flat-           | https://github.com/designmodo/Flat-UI              | yes\nfont-awesome     | awesome-        | https://github.com/FortAwesome/Font-Awesome        | yes\nfoundation       | foundation-     | https://github.com/zurb/foundation-icon-fonts      | yes\ngame-icons       | game-           | https://github.com/game-icons/icons                | yes\ngeomicons-open   | geom-           | https://github.com/jxnblk/geomicons-open           | yes\nicomoon-free     | icomoon-        | https://github.com/Keyamoon/IcoMoon-Free           | yes\nioncons          | ionic-          | https://github.com/driftyco/ionicons               | yes\nmaki             | maki-           | https://github.com/mapbox/maki                     | yes\nmap-icons        | map-            | https://github.com/scottdejonge/map-icons          | yes\nmaterial-design  | material-       | https://github.com/google/material-design-icons    | yes\nmetro-ui-css     | metro-          | https://github.com/olton/Metro-UI-CSS              | yes\nmfglabs-iconset  | mfglabs-        | https://github.com/MfgLabs/mfglabs-iconset         | yes\nocticons         | oct-            | https://github.com/primer/octicons                 | yes\nopen-iconic      | open-           | https://github.com/iconic/open-iconic              | yes\npayment-font     | payment-        | https://github.com/vendocrat/PaymentFont           | yes\npayment-webfont  | payment-web-    | https://github.com/orlandotm/payment-webfont       | yes\nsemantic-ui      | (oct-/awesome-) | https://github.com/Semantic-Org/Semantic-UI/       | yes\nsimple-icons     | simple-         | https://github.com/danleech/simple-icons           | yes\nsubway           | subway-         | https://github.com/mariuszostrowski/subway         | yes\ntypicons         | typcn-          | https://github.com/stephenhutchings/typicons.font  | yes\nweather-icons    | weather-        | https://github.com/erikflowers/weather-icons       | yes\nwindows-icons    | windows-        | https://github.com/Templarian/WindowsIcons         | yes\nzero             | zero-           | src/zero                                           | yes\nzocial           | zocial-         | https://github.com/smcllns/css-social-buttons      | yes\nlogos(svg porn)  | logos-          | http://svgporn.com                                 | yes\n\nNeed more? Please leave an [issue][issues] or a [pull request][pull-requests].\n\n## Build your own collection\n\n### 1. Install `svg-icon` via `npm`:\n\n```shell\nnpm install svg-icon -g\n```\n\n### 2. Define a collection file (JSON format, [demo](https://github.com/leungwensen/svg-icon/blob/master/src/collection/zfinder.json))\n\n### 3. Build it:\n\n```shell\nsvg-icon build --source $path/to/icons.json --target $path/to/dest --name wow\n```\n\nNow you have a SVG sprite file and a demo page.\n\n```\n$path/to/dest/wow/\n    ├── index.html\n    └── svg-symbols.svg\n```\n\n## Contribute\n\n### How did you collect all these SVG icons?\n\nThere are basically two kinds of icon collections, ones with SVG source files, and others with only icon fonts.\n\n* 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.\n* 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.\n\nSo the data flow is like:\n\n```\nSources(SVG icons/icon fonts) ---separating/copying---\u003e SVG icons ---optimising---\u003e mid products(dist/svg/*) ---trimming---\u003e final products(dist/trimmed-svg/*) ---building---\u003e SVG sprite\n```\n\n### Is the contributing toolchain ready for me?\n\nYes, and no.\n\nThe 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.\n\nIf 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.\n\nOf course, the quickest way to add your favorite icons here is to leave an [issue][issues], and let me do the rest for you ;-).\n\n## References\n\n### Projects inspired `svg-icon`\n \n* [evil-icons](https://github.com/outpunk/evil-icons)\n* [Font-Awesome-SVG-PNG](https://github.com/encharm/Font-Awesome-SVG-PNG)\n\n### Projects powered `svg-icon`\n\n* [svgo](https://github.com/svg/svgo): transforming and optimizing SVG icons would be impossible without this awesome project.\n* [vinyl-fs](https://github.com/gulpjs/vinyl-fs): `gulp` and `vinyl-fs` helped me to process large amount of files without any pain.\n* [phantomjs](http://phantomjs.org/): it is the answer of lots of problems.\n* [a lot more](https://github.com/leungwensen/svg-icon/blob/master/package.json#L22)\n\n## [Known issues][issues]\n\n[homepage]: http://leungwensen.github.io/svg-icon/ \"homepage\"\n[issues]: https://github.com/leungwensen/svg-icon/issues \"issues\"\n[pull-requests]: https://github.com/leungwensen/svg-icon/pulls \"pull requests\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleungwensen%2Fsvg-icon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleungwensen%2Fsvg-icon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleungwensen%2Fsvg-icon/lists"}