import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { select } from '@storybook/addon-knobs';
import ChecIcon from '../../components/ChecIcon.vue';
import ChecNavIcon from '../../components/ChecNavIcon.vue';
import ChecMarketingIcon from '../../components/ChecMarketingIcon.vue';
import { uiIcons, navIcons, mIcons } from '../../lib/icons';
const colors = {
blue: 'text-primary-blue',
gray: 'text-gray-500',
white: 'text-white',
blue600: 'text-blue-600',
green600: 'text-green-600',
red600: 'text-red-600',
purple600: 'text-purple-600',
orange600: 'text-orange-600',
}
# Icon
#### There are 3 main groups of icons: UI, Navigation, Marketing
- UI icons are standard stroke icons utilized throughout product interface
- Sizes are customized using inline class attributes `w-3 h-3` for 12px and `w-4 h-4` for 16px
- Marketing icons are utilize on marketing site and product dashboard
- Two sets of icons: 32px & 80px
## UI icons
{{
components: {
ChecIcon
},
props: {
icon: {
default: select('Icon', Object.keys(uiIcons), 'left')
},
color: {
default: select('Color', colors, colors.blue)
},
},
template: `
`,
}}
## All UI icons
{{
components: {
ChecIcon
},
props: {
icons: {
default: uiIcons,
},
color: {
default: select('Color', colors, colors.blue)
},
},
template: `
`,
}}
## Navigation icons
{{
components: {
ChecNavIcon
},
props: {
icon: {
default: select('Icon', Object.keys(navIcons), 'orders')
},
},
template: `
`,
}}
## All navigation icons
{{
components: {
ChecNavIcon
},
props: {
icons: {
default: navIcons,
},
color: {
default: select('Color', colors, colors.blue)
},
},
template: `
`,
}}
## Marketing icons
{{
components: {
ChecMarketingIcon
},
props: {
icon: {
default: select('Icon', Object.keys(mIcons), 'standard')
},
},
template: `
`,
}}
## All marketing icons
{{
components: {
ChecMarketingIcon
},
props: {
icons: {
default: mIcons,
},
color: {
default: select('Color', colors, colors.blue)
},
},
template: `
`,
}}