Skip to content

feat: icons for thread, monitor, server, mic, video camera, prohibited and no entry #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kfiven merged 1 commit into from
May 26, 2025
Merged

feat: icons for thread, monitor, server, mic, video camera, prohibited and no entry #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/components/icon/Icons.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,20 @@ import { Text } from "../text";
import { Box } from "../box";

const StorybookIconGroup = (props: Omit<IconProps, "src">) => (
<Box direction="Column" wrap="Wrap" gap="700" style={{ padding: "100px" }}>
<Box wrap="Wrap" gap="700" style={{ padding: "100px" }}>
{(Object.keys(Icons) as IconName[]).map((key) => (
<Box gap="600" alignItems="Center" key={key}>
<Box
style={{ width: 80 }}
direction="Column"
gap="300"
alignItems="Center"
justifyContent="Center"
key={key}
>
<Icon src={Icons[key]} {...props} />
<Text>{key}</Text>
<Text align="Center" size="T200">
{key}
</Text>
</Box>
))}
</Box>
Expand Down
306 changes: 306 additions & 0 deletions src/components/icon/Icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,17 @@ export type IconName =
| "Funnel"
| "Bookmark"
| "Inbox"
| "Thread"
| "ThreadPlus"
| "ThreadUnread"
| "Monitor"
| "Server"
| "Prohibited"
| "NoEntry"
| "Mic"
| "MicMute"
| "VideoCamera"
| "VideoCameraMute"
| "Hash"
| "HashLock"
| "HashGlobe"
Expand Down Expand Up @@ -1348,6 +1359,301 @@ export const Icons: Record<IconName, IconSrc> = {
fill="currentColor"
/>
),
Thread: (filled) =>
filled ? (
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 2C18.7614 2 21 4.23858 21 7V22L16 20H8C5.23858 20 3 17.7614 3 15V7C3 4.23858 5.23858 2 8 2H16ZM8 12V14H16V12H8ZM8 10H16V8H8V10Z"
fill="currentColor"
/>
) : (
<>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 20H8C5.23858 20 3 17.7614 3 15V7C3 4.23858 5.23858 2 8 2H16C18.7614 2 21 4.23858 21 7V22L16 20ZM19.5 19.7845L16.2889 18.5H8C6.067 18.5 4.5 16.933 4.5 15V7C4.5 5.067 6.067 3.5 8 3.5H16C17.933 3.5 19.5 5.067 19.5 7V19.7845Z"
fill="currentColor"
/>
<rect x="8" y="8" width="8" height="2" fill="currentColor" />
<rect x="8" y="12" width="8" height="2" fill="currentColor" />
</>
),
ThreadPlus: (filled) =>
filled ? (
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 2C18.7614 2 21 4.23858 21 7V22L16 20H8C5.23858 20 3 17.7614 3 15V7C3 4.23858 5.23858 2 8 2H16ZM11 7V10H8V12H11V15H13V12H16V10H13V7H11Z"
fill="currentColor"
/>
) : (
<>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 20H8C5.23858 20 3 17.7614 3 15V7C3 4.23858 5.23858 2 8 2H16C18.7614 2 21 4.23858 21 7V22L16 20ZM19.5 19.7845L16.2889 18.5H8C6.067 18.5 4.5 16.933 4.5 15V7C4.5 5.067 6.067 3.5 8 3.5H16C17.933 3.5 19.5 5.067 19.5 7V19.7845Z"
fill="currentColor"
/>
<rect x="11" y="7" width="2" height="8" fill="currentColor" />
<rect x="16" y="10" width="2" height="8" transform="rotate(90 16 10)" fill="currentColor" />
</>
),
ThreadUnread: (filled) =>
filled ? (
<>
<circle cx="6" cy="18" r="4" fill="currentColor" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 2C18.7614 2 21 4.23858 21 7V22L16 20H11.6572C11.8784 19.3743 12 18.7014 12 18C12 16.4629 11.4212 15.0616 10.4707 14H16V12H8V12.3418C7.37441 12.1207 6.70132 12 6 12C4.90696 12 3.88262 12.293 3 12.8037V7C3 4.23858 5.23858 2 8 2H16ZM8 10H16V8H8V10Z"
fill="currentColor"
/>
</>
) : (
<>
<rect x="8" y="8" width="8" height="2" fill="currentColor" />
<circle cx="6" cy="18" r="4" fill="currentColor" />
<path
d="M16 2C18.7614 2 21 4.23858 21 7V22L16 20H11.6572C11.8253 19.5246 11.9345 19.0219 11.9775 18.5H16.2891L19.5 19.7842V7C19.5 5.067 17.933 3.5 16 3.5H8C6.067 3.5 4.5 5.067 4.5 7V12.1885C3.96763 12.3255 3.46442 12.535 3 12.8037V7C3 4.23858 5.23858 2 8 2H16Z"
fill="currentColor"
/>
<path
d="M16 14H10.4707C9.80576 13.2573 8.95921 12.6809 8 12.3418V12H16V14Z"
fill="currentColor"
/>
</>
),
Monitor: (filled) =>
filled ? (
<>
<rect x="8" y="20" width="8" height="2" fill="currentColor" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18 3C20.2091 3 22 4.79086 22 7V15C22 17.2091 20.2091 19 18 19H6C3.79086 19 2 17.2091 2 15V7C2 4.79086 3.79086 3 6 3H18ZM12 14C11.4477 14 11 14.4477 11 15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15C13 14.4477 12.5523 14 12 14Z"
fill="currentColor"
/>
</>
) : (
<>
<rect x="8" y="19" width="8" height="3" fill="currentColor" />
<path
d="M18 17.5V19H6V17.5H18ZM20.5 15V7C20.5 5.61929 19.3807 4.5 18 4.5H6C4.61929 4.5 3.5 5.61929 3.5 7V15C3.5 16.3807 4.61929 17.5 6 17.5V19L5.79395 18.9951C3.68056 18.8879 2 17.14 2 15V7C2 4.79086 3.79086 3 6 3H18C20.2091 3 22 4.79086 22 7V15C22 17.2091 20.2091 19 18 19V17.5C19.3807 17.5 20.5 16.3807 20.5 15Z"
fill="currentColor"
/>
<circle cx="12" cy="15" r="1" fill="currentColor" />
</>
),
Server: (filled) =>
filled ? (
<>
<path d="M22 11H2V3H22V11ZM5 6V8H7V6H5ZM13 8H19V6H13V8Z" fill="currentColor" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22 21H2V13H22V21ZM5 16V18H7V16H5ZM13 18H19V16H13V18Z"
fill="currentColor"
/>
</>
) : (
<>
<path
d="M2 13L22 13L22 21L2 21L2 13ZM20.5 19.5L20.5 14.5L3.5 14.5L3.5 19.5L20.5 19.5Z"
fill="currentColor"
/>
<path
d="M2 3L22 3L22 11L2 11L2 3ZM20.5 9.5L20.5 4.5L3.5 4.5L3.5 9.5L20.5 9.5Z"
fill="currentColor"
/>
<rect x="5" y="6" width="2" height="2" fill="currentColor" />
<rect x="13" y="6" width="6" height="2" fill="currentColor" />
<rect x="5" y="16" width="2" height="2" fill="currentColor" />
<rect x="13" y="16" width="6" height="2" fill="currentColor" />
</>
),
Prohibited: (filled) =>
filled ? (
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM5.63574 7.0498L16.9502 18.3643L18.3643 16.9502L7.0498 5.63574L5.63574 7.0498Z"
fill="currentColor"
/>
) : (
<>
<path
d="M20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5V22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22V20.5C16.6944 20.5 20.5 16.6944 20.5 12Z"
fill="currentColor"
/>
<rect
x="6.34314"
y="4.92871"
width="18"
height="2"
transform="rotate(45 6.34314 4.92871)"
fill="currentColor"
/>
</>
),
NoEntry: (filled) =>
filled ? (
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM6 11V13H18V11H6Z"
fill="currentColor"
/>
) : (
<>
<path
d="M20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5V22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22V20.5C16.6944 20.5 20.5 16.6944 20.5 12Z"
fill="currentColor"
/>
<rect x="6" y="11" width="12" height="2" fill="currentColor" />
</>
),
Mic: (filled) =>
filled ? (
<>
<rect x="11" y="19" width="2" height="3" fill="currentColor" />
<path
d="M21 11C21 15.9706 16.9706 20 12 20C7.18468 20 3.25264 16.2183 3.01172 11.4629L3 11H4.5C4.5 15.1421 7.85786 18.5 12 18.5C16.0128 18.5 19.2895 15.3486 19.4902 11.3857L19.5 11H21Z"
fill="currentColor"
/>
<path
d="M7 7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7V11C17 13.7614 14.7614 16 12 16C9.23858 16 7 13.7614 7 11V7Z"
fill="currentColor"
/>
</>
) : (
<>
<rect x="11" y="19" width="2" height="3" fill="currentColor" />
<path
d="M21 11C21 15.9706 16.9706 20 12 20C7.18468 20 3.25264 16.2183 3.01172 11.4629L3 11H4.5C4.5 15.1421 7.85786 18.5 12 18.5C16.0128 18.5 19.2895 15.3486 19.4902 11.3857L19.5 11H21Z"
fill="currentColor"
/>
<path
d="M15.5 11V7C15.5 5.067 13.933 3.5 12 3.5C10.067 3.5 8.5 5.067 8.5 7V11C8.5 12.933 10.067 14.5 12 14.5V16C9.32472 16 7.14053 13.8989 7.00684 11.2568L7 11V7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7V11L16.9932 11.2568C16.8595 13.8989 14.6753 16 12 16V14.5C13.933 14.5 15.5 12.933 15.5 11Z"
fill="currentColor"
/>
</>
),
MicMute: (filled) =>
filled ? (
<>
<rect x="11" y="19" width="2" height="3" fill="currentColor" />
<path
d="M4.5 11C4.5 15.1421 7.85786 18.5 12 18.5C13.9175 18.5 15.6652 17.7786 16.9912 16.5947L18.0547 17.6582C16.456 19.1128 14.3317 20 12 20C7.18468 20 3.25264 16.2183 3.01172 11.4629L3 11H4.5Z"
fill="currentColor"
/>
<path
d="M21 11C21 12.917 20.3985 14.6925 19.377 16.1523L18.2979 15.0732C18.9926 14.0013 19.4216 12.7412 19.4902 11.3857L19.5 11H21Z"
fill="currentColor"
/>
<path
d="M15.2197 14.8232C14.3497 15.5567 13.227 16 12 16C9.23858 16 7 13.7614 7 11V7C7 6.87183 7.00615 6.74489 7.01562 6.61914L15.2197 14.8232Z"
fill="currentColor"
/>
<path
d="M12 2C14.7614 2 17 4.23858 17 7V11C17 11.8069 16.8072 12.5684 16.4678 13.2432L7.68945 4.46484C8.55887 2.98975 10.1638 2 12 2Z"
fill="currentColor"
/>
<rect
x="2.27728"
y="4.00195"
width="1.5"
height="24"
transform="rotate(-45 2.27728 4.00195)"
fill="currentColor"
/>
</>
) : (
<>
<rect x="11" y="19" width="2" height="3" fill="currentColor" />
<path
d="M4.5 11C4.5 15.1421 7.85786 18.5 12 18.5C13.9175 18.5 15.6652 17.7786 16.9912 16.5947L18.0547 17.6582C16.456 19.1128 14.3317 20 12 20C7.18468 20 3.25264 16.2183 3.01172 11.4629L3 11H4.5Z"
fill="currentColor"
/>
<path
d="M21 11C21 12.917 20.3985 14.6925 19.377 16.1523L18.2979 15.0732C18.9926 14.0013 19.4216 12.7412 19.4902 11.3857L19.5 11H21Z"
fill="currentColor"
/>
<path
d="M8.5 8.10352V11C8.5 12.933 10.067 14.5 12 14.5C12.8126 14.5 13.5593 14.2215 14.1533 13.7568L15.2197 14.8232C14.3498 15.5567 13.2271 16 12 16C9.32472 16 7.14053 13.8989 7.00684 11.2568L7 11V7C7 6.87183 7.00615 6.74489 7.01562 6.61914L8.5 8.10352Z"
fill="currentColor"
/>
<path
d="M12 2C14.7614 2 17 4.23858 17 7V11L16.9932 11.2568C16.9571 11.9686 16.7709 12.6404 16.4678 13.2432L15.3232 12.0986C15.4374 11.753 15.5 11.3839 15.5 11V7C15.5 5.067 13.933 3.5 12 3.5C10.5737 3.5 9.34704 4.35332 8.80176 5.57715L7.68945 4.46484C8.55887 2.98975 10.1638 2 12 2Z"
fill="currentColor"
/>
<rect
x="2.27728"
y="4.00195"
width="1.5"
height="24"
transform="rotate(-45 2.27728 4.00195)"
fill="currentColor"
/>
</>
),
VideoCamera: (filled) =>
filled ? (
<>
<path
d="M15 4C16.6569 4 18 5.34315 18 7L18 17C18 18.6569 16.6569 20 15 20L5 20C3.34315 20 2 18.6569 2 17L2 7C2 5.34315 3.34315 4 5 4L15 4Z"
fill="currentColor"
/>
<path d="M22 7L18 11V13L22 17V7Z" fill="currentColor" />
</>
) : (
<>
<path
d="M3.5 17L2 17L2 7L3.5 7L3.5 17ZM5 18.5L15 18.5C15.8284 18.5 16.5 17.8284 16.5 17L16.5 7C16.5 6.17157 15.8284 5.5 15 5.5L5 5.5C4.17157 5.5 3.5 6.17157 3.5 7L2 7L2.00391 6.8457C2.08163 5.31166 3.31166 4.08163 4.8457 4.00391L5 4L15 4C16.6569 4 18 5.34315 18 7L18 17C18 18.6569 16.6569 20 15 20L5 20L4.8457 19.9961C3.31166 19.9184 2.08163 18.6883 2.00391 17.1543L2 17L3.5 17C3.5 17.8284 4.17157 18.5 5 18.5Z"
fill="currentColor"
/>
<path d="M22 7L18 11V13L22 17V7Z" fill="currentColor" />
</>
),
VideoCameraMute: (filled) =>
filled ? (
<>
<path d="M22 7L18 11V13L22 17V7Z" fill="currentColor" />
<path
d="M17.6992 18.3027C17.214 19.3063 16.1894 20 15 20H5C3.34315 20 2 18.6569 2 17V7C2 5.81074 2.69298 4.78512 3.69629 4.2998L17.6992 18.3027Z"
fill="currentColor"
/>
<path d="M15 4C16.6569 4 18 5.34315 18 7V15.7754L6.22461 4H15Z" fill="currentColor" />
<rect
x="2.33795"
y="2.94141"
width="24"
height="1.5"
transform="rotate(45 2.33795 2.94141)"
fill="currentColor"
/>
</>
) : (
<>
<path d="M22 7L18 11V13L22 17V7Z" fill="currentColor" />
<path
d="M3.5 17C3.5 17.8284 4.17157 18.5 5 18.5H15C15.7956 18.5 16.4437 17.8805 16.4941 17.0977L17.6992 18.3027C17.214 19.3063 16.1894 20 15 20H5L4.8457 19.9961C3.31166 19.9184 2.08163 18.6883 2.00391 17.1543L2 17V7L2.00391 6.8457C2.06082 5.72233 2.73664 4.764 3.69629 4.2998L4.90137 5.50488C4.11897 5.55573 3.5 6.20475 3.5 7V17Z"
fill="currentColor"
/>
<path
d="M15 4C16.6569 4 18 5.34315 18 7V15.7754L16.5 14.2754V7C16.5 6.17157 15.8284 5.5 15 5.5H7.72461L6.22461 4H15Z"
fill="currentColor"
/>
<rect
x="2.33795"
y="2.94141"
width="24"
height="1.5"
transform="rotate(45 2.33795 2.94141)"
fill="currentColor"
/>
</>
),

Hash: () => (
<path
Expand Down
Loading