The remote inline assets plugin for Pattern Lab Node can be used to inline assets into your templates.

Add the inline assets plugin to your project using npm:

npm install --save plugin-node-patternlab-inline-remote-assets

After that tell Pattern Lab to install the plugin:

gulp patternlab:installplugin --plugin=plugin-node-patternlab-inline-remote-assets

which will install and enable the plugin. You're now ready to use it.

Post-installation, you will see the following in your patternlab-config.json:

"plugins": {
  "plugin-node-patternlab-inline-remote-assets": {
    "enabled": true,
    "initialized": false,
    "options": {}
  }
}

Elsewhere please add the plugin-node-patternlab-inline-remote-assets entry manually to the plugins entry.

Use three curly brackets to tell handlebars to stop escaping, then call the inline plugin and pass a path to your asset, as well as an alternative text (rendered as alt-attribute for images).

{{{inline-remote-asset 'https://img.shields.io/npm/v/plugin-node-patternlab-inline-remote-assets.svg' 'Alternative text'}}}

The remote asset will then be inlined into your template before compiling.

All images contents would get base64 encoded and inserted as <img width=… height=… alt=…> tags. Other filetypes are getting outputted sanitized by dompurify directly.

The inline remote assets plugin for Pattern Lab Node was created and is maintained by Maximilian Franzke. As mentioned above this is a fork from plugin-node-patternlab-inline-assets that is mainly meant to provide the functionality to inline remote assets.