fela-plugin-embedded

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'
      ]
    }]
}

License

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

Changelog

11.3.0

| Package | Changes | | --- | --- | | fela<br>fela-dom | (#780) Added keyframes rehydration and improved the initial keyframe rendering performance | | fela-utils | (#782) We now support null and undefined strings within url() values due to Base64 | | fela | (#779) Fixed an issue when using combineRules with empty rules | | react-fela | (#776) Added ThemeContext to the TypeScript definitions |