Skip to content

hypermodules/entypo

BranchesTags

Repository files navigation

entypo

SVG sprite for the Entypo+ icon collection.

npm travis devDependencies Status standard

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.

Image

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()

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
Image entypo-add-to-list
Image entypo-add-user
Image entypo-address
Image entypo-adjust
Image entypo-air
Image entypo-aircraft-landing
Image entypo-aircraft-take-off
Image entypo-aircraft
Image entypo-align-bottom
Image entypo-align-horizontal-middle
Image entypo-align-left
Image entypo-align-right
Image entypo-align-top
Image entypo-align-vertical-middle
Image entypo-archive
Image entypo-area-graph
Image entypo-arrow-bold-down
Image entypo-arrow-bold-left
Image entypo-arrow-bold-right
Image entypo-arrow-bold-up
Image entypo-arrow-down
Image entypo-arrow-left
Image entypo-arrow-long-down
Image entypo-arrow-long-left
Image entypo-arrow-long-right
Image entypo-arrow-long-up
Image entypo-arrow-right
Image entypo-arrow-up
Image entypo-arrow-with-circle-down
Image entypo-arrow-with-circle-left
Image entypo-arrow-with-circle-right
Image entypo-arrow-with-circle-up
Image entypo-attachment
Image entypo-awareness-ribbon
Image entypo-back-in-time
Image entypo-back
Image entypo-bar-graph
Image entypo-battery
Image entypo-beamed-note
Image entypo-bell
Image entypo-blackboard
Image entypo-block
Image entypo-book
Image entypo-bookmark
Image entypo-bookmarks
Image entypo-bowl
Image entypo-box
Image entypo-briefcase
Image entypo-browser
Image entypo-brush
Image entypo-bucket
Image entypo-bug
Image entypo-cake
Image entypo-calculator
Image entypo-calendar
Image entypo-camera
Image entypo-ccw
Image entypo-chat
Image entypo-check
Image entypo-chevron-down
Image entypo-chevron-left
Image entypo-chevron-right
Image entypo-chevron-small-down
Image entypo-chevron-small-left
Image entypo-chevron-small-right
Image entypo-chevron-small-up
Image entypo-chevron-thin-down
Image entypo-chevron-thin-left
Image entypo-chevron-thin-right
Image entypo-chevron-thin-up
Image entypo-chevron-up
Image entypo-chevron-with-circle-down
Image entypo-chevron-with-circle-left
Image entypo-chevron-with-circle-right
Image entypo-chevron-with-circle-up
Image entypo-circle-with-cross
Image entypo-circle-with-minus
Image entypo-circle-with-plus
Image entypo-circle
Image entypo-circular-graph
Image entypo-clapperboard
Image entypo-classic-computer
Image entypo-clipboard
Image entypo-clock
Image entypo-cloud
Image entypo-code
Image entypo-cog
Image entypo-colours
Image entypo-compass
Image entypo-controller-fast-backward
Image entypo-controller-fast-forward
Image entypo-controller-jump-to-start
Image entypo-controller-next
Image entypo-controller-paus
Image entypo-controller-play
Image entypo-controller-record
Image entypo-controller-stop
Image entypo-controller-volume
Image entypo-copy
Image entypo-creative-commons-attribution
Image entypo-creative-commons-noderivs
Image entypo-creative-commons-noncommercial-eu
Image entypo-creative-commons-noncommercial-us
Image entypo-creative-commons-public-domain
Image entypo-creative-commons-remix
Image entypo-creative-commons-share
Image entypo-creative-commons-sharealike
Image entypo-creative-commons
Image entypo-credit-card
Image entypo-credit
Image entypo-crop
Image entypo-cross
Image entypo-cup
Image entypo-cw
Image entypo-cycle
Image entypo-database
Image entypo-dial-pad
Image entypo-direction
Image entypo-document-landscape
Image entypo-document
Image entypo-documents
Image entypo-dot-single
Image entypo-dots-three-horizontal
Image entypo-dots-three-vertical
Image entypo-dots-two-horizontal
Image entypo-dots-two-vertical
Image entypo-download
Image entypo-drink
Image entypo-drive
Image entypo-drop
Image entypo-edit
Image entypo-email
Image entypo-emoji-flirt
Image entypo-emoji-happy
Image entypo-emoji-neutral
Image entypo-emoji-sad
Image entypo-erase
Image entypo-eraser
Image entypo-export
Image entypo-eye-with-line
Image entypo-eye
Image entypo-feather
Image entypo-fingerprint
Image entypo-flag
Image entypo-flash
Image entypo-flashlight
Image entypo-flat-brush
Image entypo-flow-branch
Image entypo-flow-cascade
Image entypo-flow-line
Image entypo-flow-parallel
Image entypo-flow-tree
Image entypo-flower
Image entypo-folder-images
Image entypo-folder-music
Image entypo-folder-video
Image entypo-folder
Image entypo-forward
Image entypo-funnel
Image entypo-game-controller
Image entypo-gauge
Image entypo-globe
Image entypo-graduation-cap
Image entypo-grid
Image entypo-hair-cross
Image entypo-hand
Image entypo-heart-outlined
Image entypo-heart
Image entypo-help-with-circle
Image entypo-help
Image entypo-home
Image entypo-hour-glass
Image entypo-image-inverted
Image entypo-image
Image entypo-images
Image entypo-inbox
Image entypo-infinity
Image entypo-info-with-circle
Image entypo-info
Image entypo-install
Image entypo-key
Image entypo-keyboard
Image entypo-lab-flask
Image entypo-landline
Image entypo-language
Image entypo-laptop
Image entypo-layers
Image entypo-leaf
Image entypo-level-down
Image entypo-level-up
Image entypo-lifebuoy
Image entypo-light-bulb
Image entypo-light-down
Image entypo-light-up
Image entypo-line-graph
Image entypo-link
Image entypo-list
Image entypo-location-pin
Image entypo-location
Image entypo-lock-open
Image entypo-lock
Image entypo-log-out
Image entypo-login
Image entypo-loop
Image entypo-magnet
Image entypo-magnifying-glass
Image entypo-mail
Image entypo-man
Image entypo-map
Image entypo-mask
Image entypo-medal
Image entypo-megaphone
Image entypo-menu
Image entypo-merge
Image entypo-message
Image entypo-mic
Image entypo-minus
Image entypo-mobile
Image entypo-modern-mic
Image entypo-moon
Image entypo-mouse-pointer
Image entypo-mouse
Image entypo-music
Image entypo-network
Image entypo-new-message
Image entypo-new
Image entypo-news
Image entypo-newsletter
Image entypo-note
Image entypo-notification
Image entypo-notifications-off
Image entypo-old-mobile
Image entypo-old-phone
Image entypo-open-book
Image entypo-palette
Image entypo-paper-plane
Image entypo-pencil
Image entypo-phone
Image entypo-pie-chart
Image entypo-pin
Image entypo-plus
Image entypo-popup
Image entypo-power-plug
Image entypo-price-ribbon
Image entypo-price-tag
Image entypo-print
Image entypo-progress-empty
Image entypo-progress-full
Image entypo-progress-one
Image entypo-progress-two
Image entypo-publish
Image entypo-quote
Image entypo-radio
Image entypo-remove-user
Image entypo-reply-all
Image entypo-reply
Image entypo-resize-100%
Image entypo-resize-full-screen
Image entypo-retweet
Image entypo-rocket
Image entypo-round-brush
Image entypo-rss
Image entypo-ruler
Image entypo-save
Image entypo-scissors
Image entypo-select-arrows
Image entypo-share-alternative
Image entypo-share
Image entypo-shareable
Image entypo-shield
Image entypo-shop
Image entypo-shopping-bag
Image entypo-shopping-basket
Image entypo-shopping-cart
Image entypo-shuffle
Image entypo-signal
Image entypo-sound-mix
Image entypo-sound-mute
Image entypo-sound
Image entypo-sports-club
Image entypo-spreadsheet
Image entypo-squared-cross
Image entypo-squared-minus
Image entypo-squared-plus
Image entypo-star-outlined
Image entypo-star
Image entypo-stopwatch
Image entypo-suitcase
Image entypo-swap
Image entypo-sweden
Image entypo-switch
Image entypo-tablet-mobile-combo
Image entypo-tablet
Image entypo-tag
Image entypo-text-document-inverted
Image entypo-text-document
Image entypo-text
Image entypo-thermometer
Image entypo-thumbs-down
Image"> entypo-thumbs-up
Image entypo-thunder-cloud
Image entypo-ticket
Image entypo-time-slot
Image entypo-tools
Image entypo-traffic-cone
Image entypo-trash
Image entypo-tree
Image entypo-triangle-down
Image entypo-triangle-left
Image entypo-triangle-right
Image entypo-triangle-up
Image entypo-trophy
Image entypo-tv
Image entypo-typing
Image entypo-uninstall
Image entypo-unread
Image entypo-untag
Image entypo-upload-to-cloud
Image entypo-upload
Image entypo-user
Image entypo-users
Image entypo-v-card
Image entypo-video-camera
Image entypo-video
Image entypo-vinyl
Image entypo-voicemail
Image entypo-wallet
Image entypo-warning
Image entypo-water

Entypo+ Social Extension

Icon Name
Image entypo-500px-with-circle
Image entypo-500px
Image entypo-app-store
Image entypo-baidu
Image entypo-basecamp
Image entypo-behance
Image entypo-creative-cloud
Image entypo-dribbble-with-circle
Image entypo-dribbble
Image entypo-dropbox
Image entypo-evernote
Image entypo-facebook-with-circle
Image entypo-facebook
Image entypo-flattr
Image entypo-flickr-with-circle
Image entypo-flickr
Image entypo-foursquare
Image entypo-github-with-circle
Image entypo-github
Image entypo-google+-with-circle
Image entypo-google+
Image entypo-google-drive
Image entypo-google-hangouts
Image entypo-google-play
Image entypo-grooveshark
Image entypo-houzz
Image entypo-icloud
Image entypo-instagram-with-circle
Image entypo-instagram
Image entypo-lastfm-with-circle
Image entypo-lastfm
Image entypo-linkedin-with-circle
Image entypo-linkedin
Image entypo-mail-with-circle
Image entypo-medium-with-circle
Image entypo-medium
Image entypo-mixi
Image entypo-onedrive
Image entypo-paypal
Image entypo-picasa
Image entypo-pinterest-with-circle
Image entypo-pinterest
Image entypo-qq-with-circle
Image entypo-qq
Image entypo-raft-with-circle
Image entypo-raft
Image entypo-rainbow
Image entypo-rdio-with-circle
Image entypo-rdio
Image entypo-renren
Image entypo-scribd
Image entypo-sina-weibo
Image entypo-skype-with-circle
Image entypo-skype
Image entypo-slideshare
Image entypo-smashing
Image entypo-soundcloud
Image entypo-spotify-with-circle
Image entypo-spotify
Image entypo-stumbleupon-with-circle
Image entypo-stumbleupon
Image entypo-swarm
Image entypo-tripadvisor
Image entypo-tumblr-with-circle
Image entypo-tumblr
Image entypo-twitter-with-circle
Image entypo-twitter
Image entypo-vimeo-with-circle
Image entypo-vimeo
Image entypo-vine-with-circle
Image entypo-vine
Image entypo-vk-alternitive
Image entypo-vk-with-circle
Image entypo-vk
Image entypo-windows-store
Image entypo-xing-with-circle
Image entypo-xing
Image entypo-yelp
Image entypo-youko-with-circle
Image entypo-youko
Image entypo-youtube-with-circle
Image 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

About

✏️ SVG sprite for the Entypo+ icon collection.

entypo.hypermodul.es

Topics

svg sprites icons sprite-sheet

Resources

Readme

License

ISC license

Contributing

Contributing
Activity
Custom properties

Stars

64 stars

Watchers

2 watching

Forks

12 forks
Report repository

Releases 6

v2.1.0 Latest
Oct 22, 2017
+ 5 releases

Packages

 
 
 

Contributors

Languages