Usage guidance
An Asset
is used to help enhance content on a page or in a container, often with the intention of catching the user's attention.
All Assets
are responsive by default and will fit to their parent container if no width
or height
is provided (whilst still adhering to their viewBox
aspect ratio). A custom size can be provided by specifying either width
or height
. Please note, both properties should not be provided together as this will break the responsive scaling behavior.
Excluding Assets
that have the Colored
suffix in their names, the color of an Asset
is inherited by default but can also be overwritten on the svg
element itself.
For use-cases which are not React-based, we provide a download link for each Asset
type below their examples.
Best practices
An Asset
should be used to provide visual context or expand upon a written point. In most cases, it should not be used as an identifying mark and instead an Icon should be used.
Assignment Assets
3D Assets
ALPA Assets
ALPA Loop Assets
Logo Assets
Logomark Assets
Other Assets
Examples
Basic usage
Custom size and color
Props
Asset
Asset
accepts all props from React.HTMLAttributes<SVGElement>
.
Imports
You can import any existing asset as a separate component. For example to import the AvatarPlaceholderColored
asset use:
import { AvatarPlaceholderColored } from '@datacamp/waffles/asset';
Additionally, you can also import the following types from this module:
import type { AssetProps } from '@datacamp/waffles/asset';