Skip to content
Snippets Groups Projects
Commit b73591a7 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин :clock4:
Browse files

feat: more icons (102pcs for now) and replace to other folder as 'Mono icons'

parent a0eb66cb
No related branches found
No related tags found
1 merge request!1Project setup and add 9 initial components
Hide whitespace changes
Inline Side-by-side
Showing
with 94 additions and 429 deletions
src/stories/icons/AlignCenterIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import AlignCenterIcon from './AlignCenterIcon.vue';
const meta: Meta = {
title: 'Icons/AlignCenter',
component: AlignCenterIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof AlignCenterIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/AlignLeftIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import AlignLeftIcon from './AlignLeftIcon.vue';
const meta: Meta = {
title: 'Icons/AlignLeft',
component: AlignLeftIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof AlignLeftIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/AlignRightIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import AlignRightIcon from './AlignRightIcon.vue';
const meta: Meta = {
title: 'Icons/AlignRight',
component: AlignRightIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof AlignRightIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/ArrowLeftIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import ArrowLeftIcon from './ArrowLeftIcon.vue';
const meta: Meta = {
title: 'Icons/ArrowLeft',
component: ArrowLeftIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof ArrowLeftIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/ArrowRightIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import ArrowRightIcon from './ArrowRightIcon.vue';
const meta: Meta = {
title: 'Icons/ArrowRight',
component: ArrowRightIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof ArrowRightIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/CropIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import CropIcon from './CropIcon.vue';
const meta: Meta = {
title: 'Icons/Crop',
component: CropIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof CropIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/CrossCircleIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import CrossCircleIcon from './CrossCircleIcon.vue';
const meta: Meta = {
title: 'Icons/CrossCircle',
component: CrossCircleIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof CrossCircleIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/DashedIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import DashedIcon from './DashedIcon.vue';
const meta: Meta = {
title: 'Icons/Dashed',
component: DashedIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof DashedIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/DiagonalLineIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import DiagonalLineIcon from './DiagonalLineIcon.vue';
const meta: Meta = {
title: 'Icons/DiagonalLine',
component: DiagonalLineIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof DiagonalLineIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/DottedIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import DottedIcon from './DottedIcon.vue';
const meta: Meta = {
title: 'Icons/Dotted',
component: DottedIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof DottedIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/EditIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import EditIcon from './EditIcon.vue';
const meta: Meta = {
title: 'Icons/Edit',
component: EditIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof EditIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/ExitIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3'
import ExitIcon from './ExitIcon.vue';
const meta: Meta = {
title: 'Icons/ExitIcon',
component: ExitIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white'
},
} satisfies Meta<typeof ExitIcon>
export default meta;
type Story = StoryObj<typeof meta>
export const Primary: Story = {
args: {
color: 'black'
},
}
src/stories/icons/HamburgerIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import HamburgerIcon from './HamburgerIcon.vue';
const meta: Meta = {
title: 'Icons/Hamburger',
component: HamburgerIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof HamburgerIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/HomeIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import HomeIcon from './HomeIcon.vue';
const meta: Meta = {
title: 'Icons/Home',
component: HomeIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof HomeIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/ImageEditIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import ImageEditIcon from './ImageEditIcon.vue';
const meta: Meta = {
title: 'Icons/ImageEdit',
component: ImageEditIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof ImageEditIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/ImageIcon.stories.ts deleted 100644 → 0
+ 0
− 25
View file @ a0eb66cb
import type { Meta, StoryObj } from '@storybook/vue3';
import ImageIcon from './ImageIcon.vue';
const meta: Meta = {
title: 'Icons/Image',
component: ImageIcon,
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
},
args: {
color: 'white',
},
} satisfies Meta<typeof ImageIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
color: 'black',
},
};
src/stories/icons/ImageIcon.vue deleted 100644 → 0
+ 0
− 29
View file @ a0eb66cb
<script setup lang="ts">
interface Props {
color?: string;
size?: string | number;
}
defineProps<Props>();
</script>
<template>
<svg
:width="`${size ?? 40}px`"
:height="`${size ?? 40}px`"
viewBox="0 0 32 32"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icon-Set" transform="translate(-360.000000, -99.000000)" :fill="color ?? '#000000'">
<path
id="image-picture"
d="M368,109 C366.896,109 366,108.104 366,107 C366,105.896 366.896,105 368,105 C369.104,105 370,105.896 370,107 C370,108.104 369.104,109 368,109 L368,109 Z M368,103 C365.791,103 364,104.791 364,107 C364,109.209 365.791,111 368,111 C370.209,111 372,109.209 372,107 C372,104.791 370.209,103 368,103 L368,103 Z M390,116.128 L384,110 L374.059,120.111 L370,116 L362,123.337 L362,103 C362,101.896 362.896,101 364,101 L388,101 C389.104,101 390,101.896 390,103 L390,116.128 L390,116.128 Z M390,127 C390,128.104 389.104,129 388,129 L382.832,129 L375.464,121.535 L384,112.999 L390,118.999 L390,127 L390,127 Z M364,129 C362.896,129 362,128.104 362,127 L362,126.061 L369.945,118.945 L380.001,129 L364,129 L364,129 Z M388,99 L364,99 C361.791,99 360,100.791 360,103 L360,127 C360,129.209 361.791,131 364,131 L388,131 C390.209,131 392,129.209 392,127 L392,103 C392,100.791 390.209,99 388,99 L388,99 Z"
></path>
</g>
</g>
</svg>
</template>
<style scoped></style>
src/stories/icons/Mono/Age18Icon.vue 0 → 100644
+ 38
− 0
View file @ b73591a7
<script setup lang="ts">
interface Props {
color?: string;
size?: string | number;
}
defineProps<Props>();
</script>
<template>
<svg
:width="`${size ?? 40}px`"
:height="`${size ?? 40}px`"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 1C20 0.447715 20.4477 0 21 0C21.5523 0 22 0.447715 22 1V2H23C23.5523 2 24 2.44772 24 3C24 3.55228 23.5523 4 23 4H22V5C22 5.55228 21.5523 6 21 6C20.4477 6 20 5.55228 20 5V4H19C18.4477 4 18 3.55228 18 3C18 2.44772 18.4477 2 19 2H20V1Z"
:fill="color ?? '#000000'"
/>
<path
d="M21.1936 8.07463C21.7016 7.85776 22.297 8.09138 22.4668 8.6169C23.145 10.7148 23.1792 12.9766 22.5523 15.1064C21.8308 17.5572 20.2788 19.6804 18.1626 21.1117C16.0464 22.5429 13.498 23.193 10.9548 22.9502C8.41165 22.7075 6.03225 21.5871 4.22503 19.7814C2.4178 17.9757 1.29545 15.5972 1.05062 13.0542C0.805783 10.5112 1.45373 7.96227 2.88325 5.84491C4.31277 3.72755 6.43471 2.17379 8.88488 1.4503C11.0142 0.821568 13.2759 0.853957 15.3744 1.53036C15.9001 1.69979 16.1342 2.29501 15.9178 2.80311C15.7013 3.31122 15.1136 3.54496 14.5846 3.38623C12.9184 2.88626 11.1353 2.8783 9.4532 3.37498C7.45003 3.96647 5.71522 5.23677 4.5465 6.96784C3.37778 8.69891 2.84804 10.7828 3.04821 12.8619C3.24838 14.9409 4.16596 16.8855 5.64348 18.3618C7.121 19.8381 9.06631 20.754 11.1455 20.9525C13.2247 21.1509 15.3082 20.6195 17.0383 19.4493C18.7684 18.2792 20.0373 16.5433 20.6271 14.5397C21.1224 12.8572 21.113 11.074 20.6116 9.40826C20.4525 8.87941 20.6857 8.29149 21.1936 8.07463Z"
:fill="color ?? '#000000'"
/>
<path
d="M7.71054 9.14472L7.29441 9.35279C6.69971 9.65014 5.99999 9.21769 5.99999 8.55279C5.99999 8.214 6.1914 7.9043 6.49441 7.75279L7.78884 7.10557C7.9277 7.03615 8.08081 7 8.23605 7H8.99999C9.55227 7 9.99999 7.44772 9.99999 8V16C9.99999 16.5523 9.55227 17 8.99999 17C8.4477 17 7.99999 16.5523 7.99999 16V9.32361C7.99999 9.17493 7.84352 9.07823 7.71054 9.14472Z"
:fill="color ?? '#000000'"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18 9C18 7.89543 17.1046 7 16 7H14C12.8954 7 12 7.89543 12 9V10.5C12 11.3284 12.6716 12 13.5 12C12.6716 12 12 12.6716 12 13.5V15C12 16.1046 12.8954 17 14 17H16C17.1046 17 18 16.1046 18 15V13.5C18 12.6716 17.3284 12 16.5 12C17.3284 12 18 11.3284 18 10.5V9ZM16 10C16 9.44771 15.5523 9 15 9C14.4477 9 14 9.44771 14 10C14 10.5523 14.4477 11 15 11C15.5523 11 16 10.5523 16 10ZM16 14C16 14.5523 15.5523 15 15 15C14.4477 15 14 14.5523 14 14C14 13.4477 14.4477 13 15 13C15.5523 13 16 13.4477 16 14Z"
:fill="color ?? '#000000'"
/>
</svg>
</template>
<style scoped></style>
src/stories/icons/Mono/AirplaneIcon.vue 0 → 100644
+ 26
− 0
View file @ b73591a7
<script setup lang="ts">
interface Props {
color?: string;
size?: string | number;
}
defineProps<Props>();
</script>
<template>
<svg
:width="`${size ?? 40}px`"
:height="`${size ?? 40}px`"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.8286 1.72758C19.618 1.37176 21.0449 0.981099 22.1457 2.08172C23.2466 3.18244 22.8558 4.60949 22.5 5.39885C22.2409 5.97353 21.8851 6.58498 21.4343 7.03586L18.3035 10.1667L20.75 19.9527C21.0686 21.2273 19.4017 22.0136 18.6208 20.957L13.9001 14.5701L11.0678 17.4024L10.4818 21.504C10.326 22.5944 8.90642 22.9164 8.29541 21.9999L5.86325 18.3517L1.89476 15.6042C0.960857 14.9577 1.36456 13.4958 2.49799 13.4203L6.85509 13.1298L9.65741 10.3275L3.27054 5.60674C2.21395 4.82579 3.00021 3.1589 4.27485 3.47756L14.0608 5.92406L17.1916 2.7933C17.6424 2.34244 18.254 1.98663 18.8286 1.72758ZM18.5828 4.23053L15.1548 7.65856C14.8567 7.95662 14.4241 8.07643 14.0152 7.9742L7.70352 6.39628L11.5932 9.27129C12.1832 9.70735 12.2473 10.5661 11.7285 11.0848L8.05676 14.7566C7.85123 14.9621 7.57808 15.086 7.28807 15.1054L4.91621 15.2635L7.31557 16.9246L8.79804 19.1483L9.12556 16.8556C9.16228 16.5986 9.28139 16.3604 9.46498 16.1768L13.1427 12.499C13.6615 11.9803 14.5202 12.0443 14.9562 12.6343L17.8312 16.524L16.2533 10.2123C16.1511 9.80342 16.2709 9.37083 16.569 9.07277L19.997 5.64474C20.0811 5.54456 20.4407 5.10051 20.6767 4.57691C20.9648 3.93787 20.8835 3.64788 20.7316 3.49604C20.5796 3.34411 20.2895 3.26286 19.6505 3.5509C19.127 3.78691 18.683 4.14648 18.5828 4.23053Z"
:fill="color ?? '#000000'"
/>
</svg>
</template>
<style scoped></style>
src/stories/icons/Mono/AlarmIcon.vue 0 → 100644
+ 30
− 0
View file @ b73591a7
<script setup lang="ts">
interface Props {
color?: string;
size?: string | number;
}
defineProps<Props>();
</script>
<template>
<svg
:width="`${size ?? 40}px`"
:height="`${size ?? 40}px`"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.9999 11.8811V5.99997C12.9999 5.44768 12.5522 4.99997 11.9999 4.99997C11.4476 4.99997 10.9999 5.44768 10.9999 5.99997V12.4666C10.9999 12.8159 11.2182 13.1618 11.5173 13.3345L16.1371 16.0017C16.6154 16.2779 17.227 16.114 17.5031 15.6357C17.7792 15.1574 17.6154 14.5458 17.1371 14.2697L12.9999 11.8811Z"
:fill="color ?? '#000000'"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.9999 0.00012207C11.4477 0.00012207 10.9999 0.447835 10.9999 1.00012V1.04484C9.74801 1.15765 8.55656 1.48023 7.46101 1.97715C7.18844 1.67245 6.75176 1.24982 6.16157 0.932023C5.62139 0.641155 4.92587 0.427815 4.12846 0.531815C3.3261 0.636461 2.53871 1.04702 1.79289 1.79283C1.04706 2.53865 0.636487 3.32603 0.531831 4.12839C0.427821 4.9258 0.641157 5.62133 0.932021 6.1615C1.24982 6.75171 1.67247 7.1884 1.97717 7.46097C1.34951 8.84475 0.999995 10.3815 0.999995 11.9999C0.999995 14.6729 1.95339 17.1232 3.53867 19.0293L2.29875 20.2692C1.90823 20.6597 1.90892 21.2936 2.29944 21.6841C2.68996 22.0746 3.32381 22.0753 3.71433 21.6848L4.95277 20.4464C6.86141 22.0405 9.31864 22.9999 11.9999 22.9999C14.6812 22.9999 17.1385 22.0405 19.0471 20.4464L20.2855 21.6848C20.6761 22.0753 21.3099 22.0746 21.7004 21.6841C22.0909 21.2936 22.0916 20.6597 21.7011 20.2692L20.4612 19.0293C22.0465 17.1232 22.9999 14.6729 22.9999 11.9999C22.9999 10.3815 22.6504 8.84475 22.0227 7.46097C22.3274 7.18839 22.75 6.75171 23.0678 6.1615C23.3587 5.62132 23.572 4.92579 23.468 4.12839C23.3634 3.32602 22.9528 2.53864 22.207 1.79283C21.4612 1.04702 20.6738 0.636458 19.8714 0.531811C19.074 0.427811 18.3785 0.641152 17.8383 0.932019C17.2481 1.24982 16.8114 1.67245 16.5389 1.97715C15.4433 1.48023 14.2519 1.15766 12.9999 1.04484V1.00012C12.9999 0.447835 12.5522 0.00012207 11.9999 0.00012207ZM18.337 3.00768C19.3663 3.73444 20.2654 4.63349 20.9922 5.66286C21.108 5.5287 21.2187 5.37704 21.3069 5.21331C21.4535 4.94099 21.5215 4.66777 21.4848 4.38706C21.4489 4.11131 21.297 3.71121 20.7928 3.20705C20.2886 2.70289 19.8885 2.55097 19.6128 2.515C19.332 2.47839 19.0588 2.54631 18.7865 2.69295C18.6228 2.78111 18.4711 2.89187 18.337 3.00768ZM3.0077 5.66287C3.73446 4.63349 4.63351 3.73444 5.66289 3.00768C5.52874 2.89187 5.37709 2.78111 5.21337 2.69295C4.94105 2.54631 4.66783 2.4784 4.38711 2.51501C4.11136 2.55097 3.71125 2.70289 3.20708 3.20705C2.70291 3.71121 2.55099 4.11131 2.51502 4.38707C2.47841 4.66777 2.54632 4.94099 2.69295 5.21331C2.78112 5.37704 2.89189 5.52871 3.0077 5.66287ZM11.9999 20.9931C7.03317 20.9931 3.00681 16.9667 3.00681 11.9999C3.00681 7.03317 7.03317 3.00681 11.9999 3.00681C16.9667 3.00681 20.9931 7.03317 20.9931 11.9999C20.9931 16.9667 16.9667 20.9931 11.9999 20.9931Z"
:fill="color ?? '#000000'"
/>
</svg>
</template>
<style scoped></style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment