import { ArgsTable, Canvas, Description, Meta, Story, } from "@storybook/addon-docs"
import VIcon from "~/components/VIcon/VIcon.vue"
import spriteData from "~svgsprite/sprites.json"
export const iconNames = spriteData.reduce((accumulator, sprite) => {
const iconsWithNamespace = sprite.symbols.map((symbol) =>
sprite.defaultSprite ? symbol : ${sprite.name}/${symbol}
)
return accumulator.concat(iconsWithNamespace)
}, [])
export const Template = (args) => ({
template: <VIcon v-bind="args" />,
components: { VIcon },
setup() {
return { args }
},
})
To display the icon, pass the name of the icon as a prop.
<VIcon name="icon-name" />VIcon can flip the icon for RTL languages. This is useful for certain icons
that have an intrinsic directional nature such as those involving arrows.
To see the RTL layout, switch to the Canvas tab and toggle the directionality using the 🌐 button.
{Template.bind({})}