ionicons-inline

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: '';
  line-height: 1em;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: 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');
  background-size: 16px 16px;
  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

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';

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

button::after {
  @include ion-md-wifi(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