fela-plugin-embedded

This plugins allows the use of inline keyframes and font-faces. It directly resolves them while rendering and only returns the correct reference.

Installation

yarn add fela-plugin-embedded

You may alternatively use npm i --save fela-plugin-embedded.

Usage

Make sure to read the documentation on how to use plugins.

import { createRenderer } from 'fela'
import embedded from 'fela-plugin-embedded'

const renderer = createRenderer({
  plugins: [embedded()],
})

Example

Input

{
  width: '25px',
  animationName: {
    '0%': { color: 'red ' },
    '100%': { color: 'blue' }
  },
  fontFace: {
    fontFamily: 'Arial',
    src: [
      '../Arial.svg',
      '../Arial.ttf'
    ]
  }
}

Output

{
  width: '25px',
  animationName: 'k1',
  fontFamily: 'Arial'
}

Base64 encoded font-faces

{
  fontFace: {
    fontFamily: 'font-name',
    src: [
      'data:application/x-font-woff;charset=utf-8;base64,PASTE-BASE64-HERE'
    ]
  }
}

Multiple font-faces

{
  fontFace: [
    {
      fontFamily: 'Arial',
      fontWeight: 400,
      src: ['arial-regular.svg', 'arial-regular.ttf'],
    },
    {
      fontFamily: 'Arial',
      fontWeight: 700,
      src: ['arial-bold.svg', 'arial-bold.ttf'],
    },
  ],
}

Fallback fonts

{
  fontFace: [
    {
      fontFamily: 'Arial',
      fontWeight: 400,
      src: ['arial.svg', 'arial.ttf'],
    },
    "sans-serif"
  ],
}

License

Fela is licensed under the MIT License. Documentation is licensed under Creative Commons License. Created with ♥ by @robinweser and all the great contributors.