Filters

Applies a set of unique SVG filters. Best used with images, but also available to select components, such as Avatars.

javascript 
import { filter } from '@brainandbones/skeleton';

Examples

example Original
example Emerald
example BlueNight
example XPro
example Summer84
example Rustic
example Apollo
example GreenFall
example Noir
example NoirLight

Usage

Import Filter Components

Add within scope of your filtered element. For global scope, add the following to your app's root component. Only import the filters you plan to use.

javascript 
import { Emerald, BlueNight, /* ... */  } from '@brainandbones/skeleton';
html 
<Emerald />
<BlueNight />

You'll then need to apply the filter using one of the two techniques listed below.

Option 1: Use the Svelte Action

Use the following Svelte action to to filter any element.

html 
<img src={myImageSrc} use:filter={'BlueNight'}>

Option 2: Using Only CSS

Alternatively you may apply filters using CSS. This is what the action does for you. Note the hash mark is required.

html 
<img src={myImageSrc} style="filter: url({'#Emerald'})">

Browser Support

Please be aware that browser support varies. Some filters are not functional in Safari, while Firefox is not supported at all. We recommend using progressive enhancement when using filters in non-supported browsers.

Chrome: Full

Edge: Full

Safari: Partial

Firefox: None