@dcylabs/stencil-css-url-to-base64

Stencil CSS URL to base64

A simple stencil plugin that allows you to embed your fonts as base64 encode url

Input:

@font-face{
    font-family:'IconFont';
    src: url(./iconfont.woff) format('woff');
}

Output:

@font-face{
    font-family:'IconFont';
    src: url(data:;base64,<base64 encoded content of ./iconfont.woff>) format('woff');
}

Install

npm i --save @dcylabs/stencil-css-url-to-base64

Usage

import { Config } from '@stencil/core';
import { cssBase64URL } from '@dcylabs/stencil-css-url-to-base64';

export const config: Config = {
  plugins: [
    cssBase64URL()
  ]
};

Please note that it also works alongside with sass plugin too !

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import { cssBase64URL } from '@dcylabs/stencil-css-url-to-base64';

export const config: Config = {
  plugins: [
    // we recommend to put sass before to avoid performance issue at build time 
    sass(),
    cssBase64URL()
  ]
};