entypo v2.2.1
entypo
SVG sprite for the Entypo+ icon collection.
About
This is a node module that packages the Entypo+ icon collection as a SVG sprite.
What is Entypo?
411 carefully crafted premium pictograms by Daniel Bruce - CC BY-SA 4.0.
See entypo.com for more information.
What is a SVG sprite?
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.
Install
npm install entypo
Usage
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;
}
API
entypo()
- 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.
entypo.getNode()
- 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.
Example
document.body.insertBefore(entypo.getNode(), document.body.firstChild)
entypo.htmlToElement(html: string)
- 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.
entypo.path
- string: path to svg sprite (e.g.
node_modules/entypo/dist/sprite.svg
)
Icon Names
Entypo+
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 |
Entypo+ Social Extension
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 |
Example
To see an example implementation, try npm run example
. Source code is in example.js
.
Contributing
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.
License
- Module: ISC
- Icons: CC BY-SA 4.0.