Skip to content

Commit 0c2e0fa

Browse files
ajburaajbura
authored
feat: icons for thread, monitor, server, mic, video camera, prohibited and no entry (#83)
1 parent 6981e91 commit 0c2e0fa

File tree

2 files changed

+318
-3
lines changed

2 files changed

+318
-3
lines changed

‎src/components/icon/Icons.stories.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,20 @@ import { Text } from "../text";
66
import { Box } from "../box";
77

88
const StorybookIconGroup = (props: Omit<IconProps, "src">) => (
9-
<Box direction="Column" wrap="Wrap" gap="700" style={{ padding: "100px" }}>
9+
<Box wrap="Wrap" gap="700" style={{ padding: "100px" }}>
1010
{(Object.keys(Icons) as IconName[]).map((key) => (
11-
<Box gap="600" alignItems="Center" key={key}>
11+
<Box
12+
style={{ width: 80 }}
13+
direction="Column"
14+
gap="300"
15+
alignItems="Center"
16+
justifyContent="Center"
17+
key={key}
18+
>
1219
<Icon src={Icons[key]} {...props} />
13-
<Text>{key}</Text>
20+
<Text align="Center" size="T200">
21+
{key}
22+
</Text>
1423
</Box>
1524
))}
1625
</Box>

‎src/components/icon/Icons.tsx‎

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,17 @@ export type IconName =
5555
| "Funnel"
5656
| "Bookmark"
5757
| "Inbox"
58+
| "Thread"
59+
| "ThreadPlus"
60+
| "ThreadUnread"
61+
| "Monitor"
62+
| "Server"
63+
| "Prohibited"
64+
| "NoEntry"
65+
| "Mic"
66+
| "MicMute"
67+
| "VideoCamera"
68+
| "VideoCameraMute"
5869
| "Hash"
5970
| "HashLock"
6071
| "HashGlobe"
@@ -1348,6 +1359,301 @@ export const Icons: Record<IconName, IconSrc> = {
13481359
fill="currentColor"
13491360
/>
13501361
),
1362+
Thread: (filled) =>
1363+
filled ? (
1364+
<path
1365+
fillRule="evenodd"
1366+
clipRule="evenodd"
1367+
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"
1368+
fill="currentColor"
1369+
/>
1370+
) : (
1371+
<>
1372+
<path
1373+
fillRule="evenodd"
1374+
clipRule="evenodd"
1375+
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"
1376+
fill="currentColor"
1377+
/>
1378+
<rect x="8" y="8" width="8" height="2" fill="currentColor" />
1379+
<rect x="8" y="12" width="8" height="2" fill="currentColor" />
1380+
</>
1381+
),
1382+
ThreadPlus: (filled) =>
1383+
filled ? (
1384+
<path
1385+
fillRule="evenodd"
1386+
clipRule="evenodd"
1387+
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"
1388+
fill="currentColor"
1389+
/>
1390+
) : (
1391+
<>
1392+
<path
1393+
fillRule="evenodd"
1394+
clipRule="evenodd"
1395+
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"
1396+
fill="currentColor"
1397+
/>
1398+
<rect x="11" y="7" width="2" height="8" fill="currentColor" />
1399+
<rect x="16" y="10" width="2" height="8" transform="rotate(90 16 10)" fill="currentColor" />
1400+
</>
1401+
),
1402+
ThreadUnread: (filled) =>
1403+
filled ? (
1404+
<>
1405+
<circle cx="6" cy="18" r="4" fill="currentColor" />
1406+
<path
1407+
fillRule="evenodd"
1408+
clipRule="evenodd"
1409+
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"
1410+
fill="currentColor"
1411+
/>
1412+
</>
1413+
) : (
1414+
<>
1415+
<rect x="8" y="8" width="8" height="2" fill="currentColor" />
1416+
<circle cx="6" cy="18" r="4" fill="currentColor" />
1417+
<path
1418+
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"
1419+
fill="currentColor"
1420+
/>
1421+
<path
1422+
d="M16 14H10.4707C9.80576 13.2573 8.95921 12.6809 8 12.3418V12H16V14Z"
1423+
fill="currentColor"
1424+
/>
1425+
</>
1426+
),
1427+
Monitor: (filled) =>
1428+
filled ? (
1429+
<>
1430+
<rect x="8" y="20" width="8" height="2" fill="currentColor" />
1431+
<path
1432+
fillRule="evenodd"
1433+
clipRule="evenodd"
1434+
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"
1435+
fill="currentColor"
1436+
/>
1437+
</>
1438+
) : (
1439+
<>
1440+
<rect x="8" y="19" width="8" height="3" fill="currentColor" />
1441+
<path
1442+
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"
1443+
fill="currentColor"
1444+
/>
1445+
<circle cx="12" cy="15" r="1" fill="currentColor" />
1446+
</>
1447+
),
1448+
Server: (filled) =>
1449+
filled ? (
1450+
<>
1451+
<path d="M22 11H2V3H22V11ZM5 6V8H7V6H5ZM13 8H19V6H13V8Z" fill="currentColor" />
1452+
<path
1453+
fillRule="evenodd"
1454+
clipRule="evenodd"
1455+
d="M22 21H2V13H22V21ZM5 16V18H7V16H5ZM13 18H19V16H13V18Z"
1456+
fill="currentColor"
1457+
/>
1458+
</>
1459+
) : (
1460+
<>
1461+
<path
1462+
d="M2 13L22 13L22 21L2 21L2 13ZM20.5 19.5L20.5 14.5L3.5 14.5L3.5 19.5L20.5 19.5Z"
1463+
fill="currentColor"
1464+
/>
1465+
<path
1466+
d="M2 3L22 3L22 11L2 11L2 3ZM20.5 9.5L20.5 4.5L3.5 4.5L3.5 9.5L20.5 9.5Z"
1467+
fill="currentColor"
1468+
/>
1469+
<rect x="5" y="6" width="2" height="2" fill="currentColor" />
1470+
<rect x="13" y="6" width="6" height="2" fill="currentColor" />
1471+
<rect x="5" y="16" width="2" height="2" fill="currentColor" />
1472+
<rect x="13" y="16" width="6" height="2" fill="currentColor" />
1473+
</>
1474+
),
1475+
Prohibited: (filled) =>
1476+
filled ? (
1477+
<path
1478+
fillRule="evenodd"
1479+
clipRule="evenodd"
1480+
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"
1481+
fill="currentColor"
1482+
/>
1483+
) : (
1484+
<>
1485+
<path
1486+
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"
1487+
fill="currentColor"
1488+
/>
1489+
<rect
1490+
x="6.34314"
1491+
y="4.92871"
1492+
width="18"
1493+
height="2"
1494+
transform="rotate(45 6.34314 4.92871)"
1495+
fill="currentColor"
1496+
/>
1497+
</>
1498+
),
1499+
NoEntry: (filled) =>
1500+
filled ? (
1501+
<path
1502+
fillRule="evenodd"
1503+
clipRule="evenodd"
1504+
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"
1505+
fill="currentColor"
1506+
/>
1507+
) : (
1508+
<>
1509+
<path
1510+
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"
1511+
fill="currentColor"
1512+
/>
1513+
<rect x="6" y="11" width="12" height="2" fill="currentColor" />
1514+
</>
1515+
),
1516+
Mic: (filled) =>
1517+
filled ? (
1518+
<>
1519+
<rect x="11" y="19" width="2" height="3" fill="currentColor" />
1520+
<path
1521+
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"
1522+
fill="currentColor"
1523+
/>
1524+
<path
1525+
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"
1526+
fill="currentColor"
1527+
/>
1528+
</>
1529+
) : (
1530+
<>
1531+
<rect x="11" y="19" width="2" height="3" fill="currentColor" />
1532+
<path
1533+
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"
1534+
fill="currentColor"
1535+
/>
1536+
<path
1537+
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"
1538+
fill="currentColor"
1539+
/>
1540+
</>
1541+
),
1542+
MicMute: (filled) =>
1543+
filled ? (
1544+
<>
1545+
<rect x="11" y="19" width="2" height="3" fill="currentColor" />
1546+
<path
1547+
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"
1548+
fill="currentColor"
1549+
/>
1550+
<path
1551+
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"
1552+
fill="currentColor"
1553+
/>
1554+
<path
1555+
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"
1556+
fill="currentColor"
1557+
/>
1558+
<path
1559+
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"
1560+
fill="currentColor"
1561+
/>
1562+
<rect
1563+
x="2.27728"
1564+
y="4.00195"
1565+
width="1.5"
1566+
height="24"
1567+
transform="rotate(-45 2.27728 4.00195)"
1568+
fill="currentColor"
1569+
/>
1570+
</>
1571+
) : (
1572+
<>
1573+
<rect x="11" y="19" width="2" height="3" fill="currentColor" />
1574+
<path
1575+
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"
1576+
fill="currentColor"
1577+
/>
1578+
<path
1579+
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"
1580+
fill="currentColor"
1581+
/>
1582+
<path
1583+
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"
1584+
fill="currentColor"
1585+
/>
1586+
<path
1587+
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"
1588+
fill="currentColor"
1589+
/>
1590+
<rect
1591+
x="2.27728"
1592+
y="4.00195"
1593+
width="1.5"
1594+
height="24"
1595+
transform="rotate(-45 2.27728 4.00195)"
1596+
fill="currentColor"
1597+
/>
1598+
</>
1599+
),
1600+
VideoCamera: (filled) =>
1601+
filled ? (
1602+
<>
1603+
<path
1604+
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"
1605+
fill="currentColor"
1606+
/>
1607+
<path d="M22 7L18 11V13L22 17V7Z" fill="currentColor" />
1608+
</>
1609+
) : (
1610+
<>
1611+
<path
1612+
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"
1613+
fill="currentColor"
1614+
/>
1615+
<path d="M22 7L18 11V13L22 17V7Z" fill="currentColor" />
1616+
</>
1617+
),
1618+
VideoCameraMute: (filled) =>
1619+
filled ? (
1620+
<>
1621+
<path d="M22 7L18 11V13L22 17V7Z" fill="currentColor" />
1622+
<path
1623+
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"
1624+
fill="currentColor"
1625+
/>
1626+
<path d="M15 4C16.6569 4 18 5.34315 18 7V15.7754L6.22461 4H15Z" fill="currentColor" />
1627+
<rect
1628+
x="2.33795"
1629+
y="2.94141"
1630+
width="24"
1631+
height="1.5"
1632+
transform="rotate(45 2.33795 2.94141)"
1633+
fill="currentColor"
1634+
/>
1635+
</>
1636+
) : (
1637+
<>
1638+
<path d="M22 7L18 11V13L22 17V7Z" fill="currentColor" />
1639+
<path
1640+
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"
1641+
fill="currentColor"
1642+
/>
1643+
<path
1644+
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"
1645+
fill="currentColor"
1646+
/>
1647+
<rect
1648+
x="2.33795"
1649+
y="2.94141"
1650+
width="24"
1651+
height="1.5"
1652+
transform="rotate(45 2.33795 2.94141)"
1653+
fill="currentColor"
1654+
/>
1655+
</>
1656+
),
13511657

13521658
Hash: () => (
13531659
<path

0 commit comments

Comments
 (0)