ionicons-inline
Use Ionicons in Sass as inline SVG, no images or webfonts needed
Last updated 2 years ago by rstacruz .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ionicons-inline 
SYNC missed versions from official npm registry.

ionicons-inline

Use Ionicons in Sass as inline SVG, no images or webfonts needed

ionicons-inline lets you use Ionicons in your CSS without images or webfonts. It embeds the icons as embedded SVG's via data URI's. This is based on ionicons v3.0.0.

Example

button::before {
  content: '';
  @include ion-md-wifi(16px, #aaddff);
}

Returns:

button::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%2048C141.1%2048%2048%20141.1%2048%20256s93.1%20208%20208%20208%20208-93.1%20208-208S370.9%2048%20256%2048zm0%20398.7c-105.1%200-190.7-85.5-190.7-190.7S150.9%2065.3%20256%2065.3%20446.7%20150.9%20446.7%20256%20361.1%20446.7%20256%20446.7z%22%2F%3E%3Cpath%20d%3D%22M264%20128h-16v120H128v16h120v120h16V264h120v-16H264z%22%2F%3E%3Cstyle%3Epath%7Bfill%3A#aaddff%3B%7D%3C%2Fstyle%3E%3C%2Fsvg%3E') center center / 16px 16px no-repeat;
  height: 16px;
  width: 16px;
}

Why?

Unlike the default ionicons distribution, this lets you only bundle the icons you need. You also don't need to load the 70kb+ ionicons package. This is great if you only need a few icons from the set.

Usage

Install it as an npm package. It's preferred you use --exact, because icons may change per version.

npm install --save --save-exact ionicons-inline # via npm
yarn add --exact ionicons-inline                # via yarn
Importing

Import it in your CSS. The way to do this differs in a lot of ways, but in general, one of these ought to work.

@import 'ionicons-inline/dist/ionicons';
@import '~ionicons-inline/dist/ionicons';
@import '../node_modules/ionicons-inline/dist/ionicons';
Mixin: ion-icon

Just use a mixin named ion-<iconname>. See Ionic framework icons.

.icon {
  @include ion-md-wifi(16px, #aaddff);
}
Function: ion-icon-image

This sets many properties (width, height, background-image, background-size, background-position, background-repeat, display, vertical-align). If you only want to set background-image, you can use:

.icon {
  background-image: ion-md-wifi-image(16px, #aaddff);
}

Prior art

  • iconfonts also lets you selectively embed just a few CSS declarations. However, it still needs to load the 70kb+ ionicons file.

Thanks

ionicons-inline © 2017+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz

 

Current Tags

  • 1.0.0                                ...           latest (2 years ago)

11 Versions

  • 1.0.0                                ...           2 years ago
  • 0.0.11                                ...           3 years ago
  • 0.0.10                                ...           3 years ago
  • 0.0.9                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |