|
<script> |
|
// @ts-nocheck |
|
import { Meta, Story } from "@storybook/addon-svelte-csf"; |
|
|
|
import { |
|
Error, |
|
Brush, |
|
Camera, |
|
Chart, |
|
Chat, |
|
Check, |
|
Circle, |
|
Clear, |
|
Code, |
|
Color, |
|
Community, |
|
Copy, |
|
Dislike, |
|
Download, |
|
DropdownArrow, |
|
Edit, |
|
Erase, |
|
File, |
|
Info, |
|
Image, |
|
JSON, |
|
Like, |
|
LineChart, |
|
Maximise, |
|
Music, |
|
Pause, |
|
Play, |
|
Plot, |
|
Remove, |
|
Sketch, |
|
Square, |
|
Table, |
|
TextHighlight, |
|
Trash, |
|
Tree, |
|
Undo, |
|
Video, |
|
Warning |
|
} from "../../icons/src"; |
|
|
|
const icons = [ |
|
{ name: "error", value: Error }, |
|
{ name: "brush", value: Brush }, |
|
{ name: "Camera", value: Camera }, |
|
{ name: "Chart", value: Chart }, |
|
{ name: "Chat", value: Chat }, |
|
{ name: "Check", value: Check }, |
|
{ name: "Circle", value: Circle }, |
|
{ name: "Clear", value: Clear }, |
|
{ name: "Code", value: Code }, |
|
{ name: "Color", value: Color }, |
|
{ name: "Community", value: Community }, |
|
{ name: "Copy", value: Copy }, |
|
{ name: "Dislike", value: Dislike }, |
|
{ name: "Download", value: Download }, |
|
{ name: "DropdownArrow", value: DropdownArrow }, |
|
{ name: "Edit", value: Edit }, |
|
{ name: "Erase", value: Erase }, |
|
{ name: "File", value: File }, |
|
{ name: "Info", value: Info }, |
|
{ name: "Image", value: Image }, |
|
{ name: "JSON", value: JSON }, |
|
{ name: "Like", value: Like }, |
|
{ name: "LineChart", value: LineChart }, |
|
{ name: "Maximise", value: Maximise }, |
|
{ name: "Music", value: Music }, |
|
{ name: "Pause", value: Pause }, |
|
{ name: "Play", value: Play }, |
|
{ name: "Plot", value: Plot }, |
|
{ name: "Remove", value: Remove }, |
|
{ name: "Sketch", value: Sketch }, |
|
{ name: "Square", value: Square }, |
|
{ name: "Table", value: Table }, |
|
{ name: "TextHighlight", value: TextHighlight }, |
|
{ name: "Trash", value: Trash }, |
|
{ name: "Tree", value: Tree }, |
|
{ name: "Undo", value: Undo }, |
|
{ name: "Video", value: Video }, |
|
{ name: "Warning", value: Warning } |
|
]; |
|
</script> |
|
|
|
<Meta title="Design System/Icons" /> |
|
|
|
<Story name="Icons"> |
|
<div class="wrapper"> |
|
<section> |
|
<h1>Icons</h1> |
|
</section> |
|
<div class="container"> |
|
{#each icons as Icon} |
|
<div class="icon-wrapper"> |
|
<div class="icon-name">{Icon.name}</div> |
|
<div |
|
style="display: flex; flex-direction: column; align-items: center; width: 50px; height: 50px;" |
|
> |
|
<Icon.value /> |
|
</div> |
|
</div> |
|
{/each} |
|
</div> |
|
</div> |
|
</Story> |
|
|
|
<style> |
|
.wrapper { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
font-family: var( |
|
} |
|
|
|
.icon-wrapper { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
|
|
.icon-name { |
|
font: var( |
|
color: var( |
|
font-weight: var( |
|
font-size: var( |
|
} |
|
|
|
section { |
|
background: #fb923c; |
|
height: 50px; |
|
width: 90%; |
|
display: flex; |
|
align-items: center; |
|
border-radius: 15px; |
|
padding: 50px; |
|
margin: 20px; |
|
} |
|
|
|
section h1 { |
|
color: white; |
|
font-weight: 700; |
|
font-size: 3em; |
|
} |
|
.container { |
|
display: grid; |
|
gap: 20px; |
|
grid-template-columns: repeat(6, 1fr); |
|
padding: 20px; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.container { |
|
grid-template-columns: repeat(3, 1fr); |
|
} |
|
} |
|
</style> |
|
|