@dcrackel/meyersquaredui/src/stories/Atoms/Icon/Icon.stories.js

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import Icon from './Icon.vue';

export default {
    title: 'Atoms/Icon',
    component: Icon,
    args: {
        icon: 'fa-search',
        color: 'primary',
        size: 'md',
    },
    argTypes: {
        icon: { control: 'text', description: 'Font Awesome icon class' },
        color: {
            control: { type: 'select', options: ['primary', 'secondary', 'accent'] },
            description: 'Icon color',
        },
        size: {
            control: { type: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] },
            description: 'Icon size',
        },
    },
};

const Template = (args) => ({
    components: { Icon },
    setup() {
        return { args };
    },
    template: '<Icon v-bind="args" />',
});

export const Default = Template.bind({});
Default.args = {
    icon: 'fa-search',
    color: 'primary',
    size: 'md',
};

export const LargeAccent = Template.bind({});
LargeAccent.args = {
    icon: 'fa-search',
    color: 'accent',
    size: '3xl',
};