Skip to content

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

vue
<Illustration type="spot" name="avatar" />

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.

vue
<Illustration type="vignette" name="bank" :size="300" />

Spot

The Illustration component supports illustrations from our spot collection

approved
avatar
barcode
calendar
cartridge
celebrate
chat-bubble
check-box
check-circle
click
cocktail
confirmation
connnect
cookie
credit-card
crm
cultivation
data
delivery-completed
delivery
digital-payments
discover
diversity
drink
dolly
easy-reconciliations
efficiency
error
extend-date
financial-growth
financial-institution
focus
fulfillment-issues
growth
handshake
hierarchy
home
laptop
licenses
light-bulb
lightbulb-error
line-chart
link
location-pin
lock
messaging
microchip
missing-data
money-transfer
money
no-inventory-access
no-inventory
no-promote
package-received
package
payment-processing
phone
pie-chart
product-cycle
puzzle
receipt
retail
searching-document
shopping-basket
shopping
sign
smile
speed
time
tools
truck
user
warehouse
warning
x-circle

Vignette

The Illustration component supports illustrations from our vignette collection

api
bank
basket
brand-menu
calendar
dashboard
deals
document-search
edit
empty-tray
graph
integrations
light-bulb
map
megaphone
messages
money-bank
notifications
orders-empty
payments
pie-chart
product-cards
product-display
search
search-storefront
store
todo
truck
users
warehouse
warehouse-delivery

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.

vue
<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.