Icons Usage API Source Code
Storefront UI ships with a default set of icons available with the naming convention SfIcon{Name}. Each icon is a component that extends the SfIconBase component.
List of all icons shipped with Storefront UI below. Click on any of the icons to copy its name.
Preview Code
< template >
< button
v-for = "componentName in componentsNames"
:key = "componentName"
type = "button"
class = "inline-block border cursor-pointer"
:data-tooltip = "componentName"
@click = "copyToClipboard(componentName)"
>
< component :is = "SfIcons[componentName]" />
</ button >
< p v-if = "copied" class = "mt-1 text-sm" > " {{ copied }} " has been copied to clipboard</ p >
</ template >
< script lang = "ts" setup >
import { ref } from 'vue' ;
import * as SfIcons from '@storefront-ui/vue' ;
const componentsNames = Object . keys ( SfIcons ). filter (
( exportName ): exportName is keyof typeof SfIcons => exportName !== 'SfIconSize' && exportName . includes ( 'SfIcon' ),
);
const copied = ref ( '' );
const copyToClipboard = ( componentName : string ) => {
navigator . clipboard . writeText ( componentName );
copied . value = componentName ;
setTimeout (() => {
copied . value = '' ;
}, 1000 );
};
</ script >
All Icon components supports various sizes that can be set with the size prop: 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl' . Size can be overwritten by applying new styling on icon.
Preview Code
< template >
< div class = "flex flex-col flex-wrap sm:flex-row" >
< SfIconHome size = "xs" />
< SfIconHome size = "sm" />
< SfIconHome />
< SfIconHome size = "lg" />
< SfIconHome size = "xl" />
< SfIconHome size = "2xl" />
< SfIconHome size = "3xl" />
< SfIconHome size = "4xl" />
</ div >
</ template >
< script lang = "ts" setup >
import { SfIconHome } from '@storefront-ui/vue' ;
</ script >
All Icon components inherit the current text color using Tailwind's fill-currenttext color
Preview Code
< template >
< SfIconThumbUp class = "text-red-600" />
< SfIconThumbUp class = "text-purple-500" />
< SfIconThumbUp class = "text-cyan-700" />
< span class = "text-gray-500" >
< SfIconThumbUp />
</ span >
</ template >
< script lang = "ts" setup >
import { SfIconThumbUp } from '@storefront-ui/vue' ;
</ script >
The SfIconBase component supports displaying of a custom SVG icon.
You can pass SVG content either via content prop or as a default slot.
If you're using a custom icon, you need to specify either the viewBox or width/height attributes for the SVG to render correctly.
Preview Code
< template >
< SfIconBase
viewBox = "0 0 24 24"
content = "<path d='M4 18a1 1 0 1 1 0-2h16a1 1 0 1 1 0 2H4Zm0-5a1 1 0 1 1 0-2h16a1 1 0 1 1 0 2H4ZM3 7a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Z'/>"
/>
< SfIconBase viewBox = "0 0 24 24" >
< path
d = "M4 18a1 1 0 1 1 0-2h16a1 1 0 1 1 0 2H4Zm0-5a1 1 0 1 1 0-2h16a1 1 0 1 1 0 2H4ZM3 7a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Z"
/>
</ SfIconBase >
</ template >
< script lang = "ts" setup >
import { SfIconBase } from '@storefront-ui/vue' ;
</ script >
Storefront UI icons are generated with use of createIcons.jsIconBase component.
When using an Icon without any additional label and/or description, you should specify an aria-label on the icon component.