lookback/meteor-entypo

Entypo icons packaged as SVG sprite for easy template use in Meteor.

Entypo icons for Meteor

Entypo+ icons by Daniel Bruce, exclusively and carefully packaged for Meteor by Lookback.

This package uses a Meteor template helper to inline each icon with help from the use element in SVG. Each icon is wrapped in a symbol element in a separate, cachable SVG sprite.

Example implementation and preview: entypo.meteor.com (Source).

Read more about SVG sprites:

• CSS Tricks: Icon System with SVG Sprites
• 24 Ways: An Overview of SVG Sprite Creation Techniques

Install

This package is available on Atmosphere as lookback:entypo.

Install package with

meteor add lookback:entypo

That will expose a entypo template helper for you to use in your app. The template helper takes one argument: the icon slug name (taken from the original SVG id attribute).

Usage

Example:

{{ > entypo 'flower'}}

Will generate:

<svg class="icon icon-flower">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/packages/lookback_entypo/entypo.svg#icon-flower"></use>
  </svg>

Styling

SVG icons can be styled to mimic font icon behavior (resizable with font-size, inheriting parent color value) like this:

/* Suggestion on styling for the .icon class.
1. Will be inherited from parent's 'color' property.
2. Resize the icon by setting `font-size` on either .icon itself or parent.
*/
.icon {
  fill: currentColor; /* 1. */
  width: 1em; /* 2. */
  height: 1em; /* 2. */
}

You can also add relevant vertical-align properties as you see fit.

meteor-entypo's Issues

Use Entypo 2 icons

This package is using the old Entypo v1 icons. A new set is available at Entypo.com.