entypo
v2.2.1
Published
SVG sprite for the Entypo+ icon collection.
Downloads
160
Readme
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 entypoUsage
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.