Overview
The brand icon component is a Vue component used to display illustrative icons from the design system at preset sizes.
These icons are intended for more graphical purposes and are often used in scenarios where imagery is needed to convey meaning.
Basic usage
Importing the component
To use the brand icon component, import both the component itself and its associated styles.
import { DsBrandIcon } from "@coloplast/design-system";
import "@coloplast/design-system/dist/components/brand-icon/ds-brand-icon.css";
Global configuration
If you need to set a custom path for the brand icons, you can configure the base path globally in your application.
This allows you to specify a location where the icons will be loaded from, it’s recommended that your project has a build step to copy the icon assets into your project, this way you guarantee that all icons are available.
// Set a custom base path for icons (set in your application)
window.dsConfig = {
brandIconBasePath: "/path/to/your/icons",
};
Example usage
You can use the brand icon component in your templates by specifying the icon name, size, and alt text for accessibility.
<DsBrandIcon
icon-name="head-with-brain"
size="md"
alt-text="Illustration of a head with a brain"
></DsBrandIcon>
Component playground and props
You can explore the available properties and try out different configurations in the Storybook playground for the brand icon component. View and modify props directly in the ‘Controls’ tab.
Accessibility
The brand icon component supports accessibility through the altText property, which provides a descriptive label for screen readers. Unlike simple visual icons, brand icons are expected to have meaningful descriptions since they act as more significant content.
- Ensure each icon used has an appropriate alt text to describe its purpose.
- Use the altText prop to convey the meaning of the icon to users who rely on assistive technologies.
Internationalisation
The brand icon component supports internationalisation by allowing custom alt text labels, which can be translated based on the target language of the user.
SEO
To ensure that the brand icons contribute to your site's SEO, always provide meaningful in-context alt text.