Illustration
The Illustration component allows you to use any illustration of our collections.
INFO
The Illustration component can receive a staticPath prop with a different path for your Illustrations and it's not limited to the staticPath option that is configured in the library installation anymore.
Basic usage
<Illustration type="spot" name="avatar" />Basic usage with custom color
The Illustration component supports passing a fillColor to change its color.
You can use primary colors here: blue, green, ice, orange, purple, red, royal, seafoam, teal, yellow.
<Illustration type="spot" name="messages" fill-color="green" />Size
The Illustration component supports passing a size prop to change its size, accepting the number of pixels that will be used both for width and height of the svg.
<Illustration type="vignette" name="bank" :size="300" />Spot
The Illustration component supports illustrations from our spot collection
Vignette
The Illustration component supports illustrations from our vignette collection
Static Path
By default, the Illustration component will use the staticPath option inject by the library to find the spreadsheet.
You can change the base path of this illustrations passing the staticPath prop to the component itself. This will override the path used by it.
TIP
If nor the illustration or the library staticPath is defined, it'll default to /static base path.
<Illustration name="cookie" static-path="/illustrations" />API
See the documentation below for a complete reference to all the props and classes available to the components mentioned here.