@fela-next/fela-plugin-embedded v12.0.3

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-next/fela'
import embedded from '@fela-next/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'
      ]
    }]
}

License

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