SVG sprite for the Entypo icon collection.
This is a node module that packages the Entypo icon collection as a SVG sprite.
411 carefully crafted premium pictograms by Daniel Bruce - CC BY-SA 4.0.
See entypo.com for more information.
A SVG sprite is a hidden SVG element inserted at the top of the body element that defines a set of icons with unique IDs. These icons can later be referenced throughout the document with the <use> element.
Read Icon System with SVG Sprites by Chris Coyier for more information.
npm install entypo
In your JavaScript:
const entypo = require('entypo')
document.body.insertBefore(entypo.getNode(), document.body.firstChild)In your HTML:
<svg><use xlink:href="#entypo-star" /></svg>In your CSS:
svg {
fill: #fff;
}- function: returns svg sprite file contents as utf-8 text
You can insert this into the page easily using the DOM API. This works by specifying brfs in the browserify transform field. You may need a special fs loader in webpack if its not picking up the transform.
- function: returns svg sprite DOM node
This a convenience function that returns the svg sprite as a DOM Node so that it can be inserted into the body element using the DOM API.
document.body.insertBefore(entypo.getNode(), document.body.firstChild)- function: converts a string to a DOM node
This is a utility function used by getNode() to convert the raw SVG text provided by the main entypo() function into a DOM node.
- string: path to svg sprite (e.g.
node_modules/entypo/dist/sprite.svg)
| Icon | Name |
|---|---|
 |
entypo-add-to-list |
 |
entypo-add-user |
 |
entypo-address |
 |
entypo-adjust |
 |
entypo-air |
 |
entypo-aircraft-landing |
 |
entypo-aircraft-take-off |
 |
entypo-aircraft |
 |
entypo-align-bottom |
 |
entypo-align-horizontal-middle |
 |
entypo-align-left |
 |
entypo-align-right |
 |
entypo-align-top |
 |
entypo-align-vertical-middle |
 |
entypo-archive |
 |
entypo-area-graph |
 |
entypo-arrow-bold-down |
 |
entypo-arrow-bold-left |
 |
entypo-arrow-bold-right |
 |
entypo-arrow-bold-up |
 |
entypo-arrow-down |
 |
entypo-arrow-left |
 |
entypo-arrow-long-down |
 |
entypo-arrow-long-left |
 |
entypo-arrow-long-right |
 |
entypo-arrow-long-up |
 |
entypo-arrow-right |
 |
entypo-arrow-up |
 |
entypo-arrow-with-circle-down |
 |
entypo-arrow-with-circle-left |
 |
entypo-arrow-with-circle-right |
 |
entypo-arrow-with-circle-up |
 |
entypo-attachment |
 |
entypo-awareness-ribbon |
 |
entypo-back-in-time |
 |
entypo-back |
 |
entypo-bar-graph |
 |
entypo-battery |
 |
entypo-beamed-note |
 |
entypo-bell |
 |
entypo-blackboard |
 |
entypo-block |
 |
entypo-book |
 |
entypo-bookmark |
 |
entypo-bookmarks |
 |
entypo-bowl |
 |
entypo-box |
 |
entypo-briefcase |
 |
entypo-browser |
 |
entypo-brush |
 |
entypo-bucket |
 |
entypo-bug |
 |
entypo-cake |
 |
entypo-calculator |
 |
entypo-calendar |
 |
entypo-camera |
 |
entypo-ccw |
 |
entypo-chat |
 |
entypo-check |
 |
entypo-chevron-down |
 |
entypo-chevron-left |
 |
entypo-chevron-right |
 |
entypo-chevron-small-down |
 |
entypo-chevron-small-left |
 |
entypo-chevron-small-right |
 |
entypo-chevron-small-up |
 |
entypo-chevron-thin-down |
 |
entypo-chevron-thin-left |
 |
entypo-chevron-thin-right |
 |
entypo-chevron-thin-up |
 |
entypo-chevron-up |
 |
entypo-chevron-with-circle-down |
 |
entypo-chevron-with-circle-left |
 |
entypo-chevron-with-circle-right |
 |
entypo-chevron-with-circle-up |
 |
entypo-circle-with-cross |
 |
entypo-circle-with-minus |
 |
entypo-circle-with-plus |
 |
entypo-circle |
 |
entypo-circular-graph |
 |
entypo-clapperboard |
 |
entypo-classic-computer |
 |
entypo-clipboard |
 |
entypo-clock |
 |
entypo-cloud |
 |
entypo-code |
 |
entypo-cog |
 |
entypo-colours |
 |
entypo-compass |
 |
entypo-controller-fast-backward |
 |
entypo-controller-fast-forward |
 |
entypo-controller-jump-to-start |
 |
entypo-controller-next |
 |
entypo-controller-paus |
 |
entypo-controller-play |
 |
entypo-controller-record |
 |
entypo-controller-stop |
 |
entypo-controller-volume |
 |
entypo-copy |
 |
entypo-creative-commons-attribution |
 |
entypo-creative-commons-noderivs |
 |
entypo-creative-commons-noncommercial-eu |
 |
entypo-creative-commons-noncommercial-us |
 |
entypo-creative-commons-public-domain |
 |
entypo-creative-commons-remix |
 |
entypo-creative-commons-share |
 |
entypo-creative-commons-sharealike |
 |
entypo-creative-commons |
 |
entypo-credit-card |
 |
entypo-credit |
 |
entypo-crop |
 |
entypo-cross |
 |
entypo-cup |
 |
entypo-cw |
 |
entypo-cycle |
 |
entypo-database |
 |
entypo-dial-pad |
 |
entypo-direction |
 |
entypo-document-landscape |
 |
entypo-document |
 |
entypo-documents |
 |
entypo-dot-single |
 |
entypo-dots-three-horizontal |
 |
entypo-dots-three-vertical |
 |
entypo-dots-two-horizontal |
 |
entypo-dots-two-vertical |
 |
entypo-download |
 |
entypo-drink |
 |
entypo-drive |
 |
entypo-drop |
 |
entypo-edit |
 |
entypo-email |
 |
entypo-emoji-flirt |
 |
entypo-emoji-happy |
 |
entypo-emoji-neutral |
 |
entypo-emoji-sad |
 |
entypo-erase |
 |
entypo-eraser |
 |
entypo-export |
 |
entypo-eye-with-line |
 |
entypo-eye |
 |
entypo-feather |
 |
entypo-fingerprint |
 |
entypo-flag |
 |
entypo-flash |
 |
entypo-flashlight |
 |
entypo-flat-brush |
 |
entypo-flow-branch |
 |
entypo-flow-cascade |
 |
entypo-flow-line |
 |
entypo-flow-parallel |
 |
entypo-flow-tree |
 |
entypo-flower |
 |
entypo-folder-images |
 |
entypo-folder-music |
 |
entypo-folder-video |
 |
entypo-folder |
 |
entypo-forward |
 |
entypo-funnel |
 |
entypo-game-controller |
 |
entypo-gauge |
 |
entypo-globe |
 |
entypo-graduation-cap |
 |
entypo-grid |
 |
entypo-hair-cross |
 |
entypo-hand |
 |
entypo-heart-outlined |
 |
entypo-heart |
 |
entypo-help-with-circle |
 |
entypo-help |
 |
entypo-home |
 |
entypo-hour-glass |
 |
entypo-image-inverted |
 |
entypo-image |
 |
entypo-images |
 |
entypo-inbox |
 |
entypo-infinity |
 |
entypo-info-with-circle |
 |
entypo-info |
 |
entypo-install |
 |
entypo-key |
 |
entypo-keyboard |
 |
entypo-lab-flask |
 |
entypo-landline |
 |
entypo-language |
 |
entypo-laptop |
 |
entypo-layers |
 |
entypo-leaf |
 |
entypo-level-down |
 |
entypo-level-up |
 |
entypo-lifebuoy |
 |
entypo-light-bulb |
 |
entypo-light-down |
 |
entypo-light-up |
 |
entypo-line-graph |
 |
entypo-link |
 |
entypo-list |
 |
entypo-location-pin |
 |
entypo-location |
 |
entypo-lock-open |
 |
entypo-lock |
 |
entypo-log-out |
 |
entypo-login |
 |
entypo-loop |
 |
entypo-magnet |
 |
entypo-magnifying-glass |
 |
entypo-mail |
 |
entypo-man |
 |
entypo-map |
 |
entypo-mask |
 |
entypo-medal |
 |
entypo-megaphone |
 |
entypo-menu |
 |
entypo-merge |
 |
entypo-message |
 |
entypo-mic |
 |
entypo-minus |
 |
entypo-mobile |
 |
entypo-modern-mic |
 |
entypo-moon |
 |
entypo-mouse-pointer |
 |
entypo-mouse |
 |
entypo-music |
 |
entypo-network |
 |
entypo-new-message |
 |
entypo-new |
 |
entypo-news |
 |
entypo-newsletter |
 |
entypo-note |
 |
entypo-notification |
 |
entypo-notifications-off |
 |
entypo-old-mobile |
 |
entypo-old-phone |
 |
entypo-open-book |
 |
entypo-palette |
 |
entypo-paper-plane |
 |
entypo-pencil |
 |
entypo-phone |
 |
entypo-pie-chart |
 |
entypo-pin |
 |
entypo-plus |
 |
entypo-popup |
 |
entypo-power-plug |
 |
entypo-price-ribbon |
 |
entypo-price-tag |
 |
entypo-print |
 |
entypo-progress-empty |
 |
entypo-progress-full |
 |
entypo-progress-one |
 |
entypo-progress-two |
 |
entypo-publish |
 |
entypo-quote |
 |
entypo-radio |
 |
entypo-remove-user |
 |
entypo-reply-all |
 |
entypo-reply |
 |
entypo-resize-100% |
 |
entypo-resize-full-screen |
 |
entypo-retweet |
 |
entypo-rocket |
 |
entypo-round-brush |
 |
entypo-rss |
 |
entypo-ruler |
 |
entypo-save |
 |
entypo-scissors |
 |
entypo-select-arrows |
 |
entypo-share-alternative |
 |
entypo-share |
 |
entypo-shareable |
 |
entypo-shield |
 |
entypo-shop |
 |
entypo-shopping-bag |
 |
entypo-shopping-basket |
 |
entypo-shopping-cart |
 |
entypo-shuffle |
 |
entypo-signal |
 |
entypo-sound-mix |
 |
entypo-sound-mute |
 |
entypo-sound |
 |
entypo-sports-club |
 |
entypo-spreadsheet |
 |
entypo-squared-cross |
 |
entypo-squared-minus |
 |
entypo-squared-plus |
 |
entypo-star-outlined |
 |
entypo-star |
 |
entypo-stopwatch |
 |
entypo-suitcase |
 |
entypo-swap |
 |
entypo-sweden |
 |
entypo-switch |
 |
entypo-tablet-mobile-combo |
 |
entypo-tablet |
 |
entypo-tag |
 |
entypo-text-document-inverted |
 |
entypo-text-document |
 |
entypo-text |
 |
entypo-thermometer |
 |
entypo-thumbs-down |
 "> |
entypo-thumbs-up |
 |
entypo-thunder-cloud |
 |
entypo-ticket |
 |
entypo-time-slot |
 |
entypo-tools |
 |
entypo-traffic-cone |
 |
entypo-trash |
 |
entypo-tree |
 |
entypo-triangle-down |
 |
entypo-triangle-left |
 |
entypo-triangle-right |
 |
entypo-triangle-up |
 |
entypo-trophy |
 |
entypo-tv |
 |
entypo-typing |
 |
entypo-uninstall |
 |
entypo-unread |
 |
entypo-untag |
 |
entypo-upload-to-cloud |
 |
entypo-upload |
 |
entypo-user |
 |
entypo-users |
 |
entypo-v-card |
 |
entypo-video-camera |
 |
entypo-video |
 |
entypo-vinyl |
 |
entypo-voicemail |
 |
entypo-wallet |
 |
entypo-warning |
 |
entypo-water |
| Icon | Name |
|---|---|
 |
entypo-500px-with-circle |
 |
entypo-500px |
 |
entypo-app-store |
 |
entypo-baidu |
 |
entypo-basecamp |
 |
entypo-behance |
 |
entypo-creative-cloud |
 |
entypo-dribbble-with-circle |
 |
entypo-dribbble |
 |
entypo-dropbox |
 |
entypo-evernote |
 |
entypo-facebook-with-circle |
 |
entypo-facebook |
 |
entypo-flattr |
 |
entypo-flickr-with-circle |
 |
entypo-flickr |
 |
entypo-foursquare |
 |
entypo-github-with-circle |
 |
entypo-github |
 |
entypo-google -with-circle |
 |
entypo-google |
 |
entypo-google-drive |
 |
entypo-google-hangouts |
 |
entypo-google-play |
 |
entypo-grooveshark |
 |
entypo-houzz |
 |
entypo-icloud |
 |
entypo-instagram-with-circle |
 |
entypo-instagram |
 |
entypo-lastfm-with-circle |
 |
entypo-lastfm |
 |
entypo-linkedin-with-circle |
 |
entypo-linkedin |
 |
entypo-mail-with-circle |
 |
entypo-medium-with-circle |
 |
entypo-medium |
 |
entypo-mixi |
 |
entypo-onedrive |
 |
entypo-paypal |
 |
entypo-picasa |
 |
entypo-pinterest-with-circle |
 |
entypo-pinterest |
 |
entypo-qq-with-circle |
 |
entypo-qq |
 |
entypo-raft-with-circle |
 |
entypo-raft |
 |
entypo-rainbow |
 |
entypo-rdio-with-circle |
 |
entypo-rdio |
 |
entypo-renren |
 |
entypo-scribd |
 |
entypo-sina-weibo |
 |
entypo-skype-with-circle |
 |
entypo-skype |
 |
entypo-slideshare |
 |
entypo-smashing |
 |
entypo-soundcloud |
 |
entypo-spotify-with-circle |
 |
entypo-spotify |
 |
entypo-stumbleupon-with-circle |
 |
entypo-stumbleupon |
 |
entypo-swarm |
 |
entypo-tripadvisor |
 |
entypo-tumblr-with-circle |
 |
entypo-tumblr |
 |
entypo-twitter-with-circle |
 |
entypo-twitter |
 |
entypo-vimeo-with-circle |
 |
entypo-vimeo |
 |
entypo-vine-with-circle |
 |
entypo-vine |
 |
entypo-vk-alternitive |
 |
entypo-vk-with-circle |
 |
entypo-vk |
 |
entypo-windows-store |
 |
entypo-xing-with-circle |
 |
entypo-xing |
 |
entypo-yelp |
 |
entypo-youko-with-circle |
 |
entypo-youko |
 |
entypo-youtube-with-circle |
 |
entypo-youtube |
To see an example implementation, try npm run example. Source code is in example.js.
Contributions welcome! Please read the contributing guidelines first.
Daniel Bruce, if you are reading this, send me an email if you want commit / release access.
- Module: ISC
- Icons: CC BY-SA 4.0.