Skip to content

Commit

Permalink
Adding new chart icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@gjones
gjones committed Feb 3, 2025
1 parent 4d7facb commit 9ee23e1
Show file tree
Hide file tree
Showing 9 changed files with 297 additions and 1 deletion.
15 changes: 14 additions & 1 deletion src/components/Icon/IconCommon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,13 @@ import ArrowDown from "@/components/icons/ArrowDown";
import ArrowLeft from "../icons/ArrowLeft";
import InfoInCircleIcon from "@/components/icons/InfoInCircleIcon";
import CheckIcon from "@/components/icons/CheckIcon";
import ChartArea from "@/components/icons/ChartArea";
import ChartBarHorizontal from "@/components/icons/ChartBarHorizontal";
import ChartDonut from "@/components/icons/ChartDonut";
import ChartHeatmap from "@/components/icons/ChartHeatmap";
import ChartScatter from "@/components/icons/ChartScatter";
import ChartStackedHorizontal from "@/components/icons/ChartStackedHorizontal";
import ChartStackedVertical from "@/components/icons/ChartStackedVertical";
import InformationIcon from "@/components/icons/InformationIcon";
import WarningIcon from "@/components/icons/WarningIcon";
import CrossIcon from "@/components/icons/CrossIcon";
Expand Down Expand Up @@ -167,7 +174,13 @@ export const ICONS_MAP = {
cards: Cards,
"cell-tower": CellTower,
chat: ChatIcon,
check: CheckIcon,
"chart-area": ChartArea,
"chart-bar-horizontal": ChartBarHorizontal,
"chart-donut": ChartDonut,
"chart-heatmap": ChartHeatmap,
"chart-scatter": ChartScatter,
"chart-stacked-horizontal": ChartStackedHorizontal,
"chart-stacked-vertical": ChartStackedVertical,
"check-in-circle": CheckInCircle,
"chevron-down": ChevronDown,
"chevron-left": ChevronLeft,
Expand Down
8 changes: 8 additions & 0 deletions src/components/Icon/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ export const ICON_NAMES = [
"cards",
"cell-tower",
"chat",
"chart-area",
"chart-bar-horizontal",
"chart-donut",
"chart-heatmap",
"chart-line",
"chart-scatter",
"chart-stacked-horizontal",
"chart-stacked-vertical",
"check",
"check-in-circle",
"chevron-down",
Expand Down
23 changes: 23 additions & 0 deletions src/components/icons/ChartArea.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { SVGAttributes } from "react";

const ChartArea = (props: SVGAttributes<SVGElement>) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M21.5 19.75C21.5 19.9489 21.421 20.1397 21.2803 20.2803C21.1397 20.421 20.9489 20.5 20.75 20.5H2.75C2.55109 20.5 2.36032 20.421 2.21967 20.2803C2.07902 20.1397 2 19.9489 2 19.75V4.75C2 4.55109 2.07902 4.36032 2.21967 4.21967C2.36032 4.07902 2.55109 4 2.75 4C2.94891 4 3.13968 4.07902 3.28033 4.21967C3.42098 4.36032 3.5 4.55109 3.5 4.75V13.5972L8.25594 9.4375C8.38536 9.32421 8.54978 9.25885 8.72165 9.25236C8.89353 9.24587 9.06241 9.29866 9.2 9.40188L14.7134 13.5372L20.2559 8.6875C20.3286 8.61556 20.4152 8.55925 20.5105 8.52201C20.6057 8.48478 20.7075 8.46741 20.8097 8.47097C20.9119 8.47454 21.0123 8.49896 21.1047 8.54275C21.1971 8.58653 21.2796 8.64875 21.3471 8.72557C21.4146 8.8024 21.4656 8.89222 21.4971 8.9895C21.5286 9.08678 21.5399 9.18948 21.5302 9.29128C21.5206 9.39307 21.4902 9.49182 21.441 9.58146C21.3918 9.67109 21.3248 9.74972 21.2441 9.8125L15.2441 15.0625C15.1146 15.1758 14.9502 15.2412 14.7783 15.2476C14.6065 15.2541 14.4376 15.2013 14.3 15.0981L8.78656 10.9647L3.5 15.5903V19H20.75C20.9489 19 21.1397 19.079 21.2803 19.2197C21.421 19.3603 21.5 19.5511 21.5 19.75Z"
fill="white"
/>
<path
d="M8.75 6.75L8.9319 6.02239L8.78057 5.98456L8.6267 6.0102L8.75 6.75ZM14.75 8.25L14.5681 8.97761L14.8373 9.0449L15.0854 8.92082L14.75 8.25ZM21.0854 5.92082C21.4559 5.73558 21.6061 5.28507 21.4208 4.91459C21.2356 4.54411 20.7851 4.39394 20.4146 4.57918L21.0854 5.92082ZM2.8733 8.4898L8.8733 7.4898L8.6267 6.0102L2.6267 7.0102L2.8733 8.4898ZM8.5681 7.47761L14.5681 8.97761L14.9319 7.52239L8.9319 6.02239L8.5681 7.47761ZM15.0854 8.92082L21.0854 5.92082L20.4146 4.57918L14.4146 7.57918L15.0854 8.92082Z"
fill="white"
/>
</svg>
);

export default ChartArea;
19 changes: 19 additions & 0 deletions src/components/icons/ChartBarHorizontal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { SVGAttributes } from "react";

const ChartBarHorizontal = (props: SVGAttributes<SVGElement>) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M20.25 9H16.5V5.25C16.5 5.05109 16.421 4.86032 16.2803 4.71967C16.1397 4.57902 15.9489 4.5 15.75 4.5H4.5V3.75C4.5 3.55109 4.42098 3.36032 4.28033 3.21967C4.13968 3.07902 3.94891 3 3.75 3C3.55109 3 3.36032 3.07902 3.21967 3.21967C3.07902 3.36032 3 3.55109 3 3.75V20.25C3 20.4489 3.07902 20.6397 3.21967 20.7803C3.36032 20.921 3.55109 21 3.75 21C3.94891 21 4.13968 20.921 4.28033 20.7803C4.42098 20.6397 4.5 20.4489 4.5 20.25V19.5H12.75C12.9489 19.5 13.1397 19.421 13.2803 19.2803C13.421 19.1397 13.5 18.9489 13.5 18.75V15H20.25C20.4489 15 20.6397 14.921 20.7803 14.7803C20.921 14.6397 21 14.4489 21 14.25V9.75C21 9.55109 20.921 9.36032 20.7803 9.21967C20.6397 9.07902 20.4489 9 20.25 9ZM15 6V9H4.5V6H15ZM12 18H4.5V15H12V18ZM19.5 13.5H4.5V10.5H19.5V13.5Z"
fill="white"
/>
</svg>
);

export default ChartBarHorizontal;
19 changes: 19 additions & 0 deletions src/components/icons/ChartDonut.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { SVGAttributes } from "react";

const ChartDonut = (props: SVGAttributes<SVGElement>) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M12.0003 2.25C11.8014 2.25 11.6106 2.32902 11.47 2.46967C11.3293 2.61032 11.2503 2.80109 11.2503 3V8.25C11.2503 8.44891 11.3293 8.63968 11.47 8.78033C11.6106 8.92098 11.8014 9 12.0003 9C12.6607 9.00015 13.3025 9.21819 13.8264 9.6203C14.3502 10.0224 14.7267 10.5861 14.8975 11.224C15.0683 11.8619 15.0239 12.5384 14.7711 13.1484C14.5183 13.7585 14.0713 14.2681 13.4993 14.5982C12.9274 14.9284 12.2625 15.0606 11.6078 14.9743C10.9531 14.888 10.3451 14.5882 9.87818 14.1212C9.41125 13.6542 9.11145 13.0462 9.02527 12.3915C8.93909 11.7368 9.07135 11.0719 9.40154 10.5C9.4508 10.4147 9.48278 10.3205 9.49564 10.2228C9.50849 10.1252 9.50198 10.0259 9.47647 9.93075C9.45097 9.83559 9.40696 9.7464 9.34697 9.66825C9.28698 9.59011 9.21218 9.52454 9.12685 9.47531L4.57998 6.85031C4.49466 6.80105 4.40048 6.76907 4.30281 6.75622C4.20513 6.74336 4.10588 6.74987 4.01073 6.77538C3.91557 6.80089 3.82637 6.84489 3.74823 6.90488C3.67008 6.96487 3.60452 7.03967 3.55529 7.125C2.48216 8.98371 2.05232 11.1446 2.33243 13.2725C2.61254 15.4004 3.58694 17.3764 5.10452 18.8941C6.62211 20.4117 8.59806 21.3863 10.7259 21.6665C12.8538 21.9468 15.0147 21.5171 16.8735 20.4441C18.7323 19.3711 20.1851 17.7147 21.0066 15.7319C21.8281 13.7491 21.9723 11.5506 21.4171 9.47742C20.8618 7.40424 19.6379 5.57222 17.9353 4.26547C16.2327 2.95872 14.1465 2.25028 12.0003 2.25ZM4.50873 8.54062L7.78154 10.4306C7.5953 10.9329 7.50006 11.4643 7.50029 12C7.50029 12.1434 7.50779 12.2812 7.52091 12.4237L3.87029 13.4062C3.5856 11.7571 3.80823 10.0605 4.50873 8.54062ZM4.25841 14.8509L7.91466 13.8722C8.22035 14.5385 8.68389 15.1203 9.26512 15.5671C9.84635 16.0139 10.5278 16.3122 11.2503 16.4363V20.2153C9.69763 20.0714 8.2173 19.4914 6.98016 18.5422C5.74301 17.593 4.79946 16.3134 4.25841 14.8509ZM12.7503 20.2153V16.4363C13.7984 16.2586 14.7498 15.7156 15.4359 14.9035C16.1219 14.0914 16.4983 13.0626 16.4983 11.9995C16.4983 10.9364 16.1219 9.90768 15.4359 9.09557C14.7498 8.28347 13.7984 7.74047 12.7503 7.56281V3.78375C14.7998 3.97101 16.7054 4.91756 18.0929 6.43761C19.4804 7.95767 20.2497 9.94144 20.2497 11.9995C20.2497 14.0576 19.4804 16.0414 18.0929 17.5614C16.7054 19.0815 14.7998 20.0281 12.7503 20.2153Z"
fill="white"
/>
</svg>
);

export default ChartDonut;
43 changes: 43 additions & 0 deletions src/components/icons/ChartHeatmap.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { SVGAttributes } from "react";

const ChartHeatmap = (props: SVGAttributes<SVGElement>) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M21.5 19.75C21.5 19.9489 21.421 20.1397 21.2803 20.2803C21.1397 20.421 20.9489 20.5 20.75 20.5H2.75C2.55109 20.5 2.36032 20.421 2.21967 20.2803C2.07902 20.1397 2 19.9489 2 19.75V4.75C2 4.55109 2.07902 4.36032 2.21967 4.21967C2.36032 4.07902 2.55109 4 2.75 4C2.94891 4 3.13968 4.07902 3.28033 4.21967C3.42098 4.36032 3.5 4.55109 3.5 4.75V19H20.75C20.9489 19 21.1397 19.079 21.2803 19.2197C21.421 19.3603 21.5 19.5511 21.5 19.75Z"
fill="white"
/>
<circle
cx="10.5"
cy="11.5"
r="2.5"
fill="white"
/>
<circle
cx="16"
cy="15"
r="2"
fill="white"
/>
<circle
cx="7"
cy="7"
r="1"
fill="white"
/>
<circle
cx="14"
cy="8"
r="4"
fill="white"
/>
</svg>
);

export default ChartHeatmap;
19 changes: 19 additions & 0 deletions src/components/icons/ChartScatter.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { SVGAttributes } from "react";

const ChartScatter = (props: SVGAttributes<SVGElement>) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M21.5 19.75C21.5 19.9489 21.421 20.1397 21.2803 20.2803C21.1397 20.421 20.9489 20.5 20.75 20.5H2.75C2.55109 20.5 2.36032 20.421 2.21967 20.2803C2.07902 20.1397 2 19.9489 2 19.75V4.75C2 4.55109 2.07902 4.36032 2.21967 4.21967C2.36032 4.07902 2.55109 4 2.75 4C2.94891 4 3.13968 4.07902 3.28033 4.21967C3.42098 4.36032 3.5 4.55109 3.5 4.75V19H20.75C20.9489 19 21.1397 19.079 21.2803 19.2197C21.421 19.3603 21.5 19.5511 21.5 19.75ZM12.125 15.25C12.3475 15.25 12.565 15.184 12.75 15.0604C12.935 14.9368 13.0792 14.7611 13.1644 14.5555C13.2495 14.35 13.2718 14.1238 13.2284 13.9055C13.185 13.6873 13.0778 13.4868 12.9205 13.3295C12.7632 13.1722 12.5627 13.065 12.3445 13.0216C12.1262 12.9782 11.9 13.0005 11.6945 13.0856C11.4889 13.1708 11.3132 13.315 11.1896 13.5C11.066 13.685 11 13.9025 11 14.125C11 14.4234 11.1185 14.7095 11.3295 14.9205C11.5405 15.1315 11.8266 15.25 12.125 15.25ZM9.875 10C10.0975 10 10.315 9.93402 10.5 9.8104C10.685 9.68679 10.8292 9.51109 10.9144 9.30552C10.9995 9.09995 11.0218 8.87375 10.9784 8.65552C10.935 8.43729 10.8278 8.23684 10.6705 8.0795C10.5132 7.92217 10.3127 7.81502 10.0945 7.77162C9.87625 7.72821 9.65005 7.75049 9.44448 7.83564C9.23891 7.92078 9.06321 8.06498 8.9396 8.24998C8.81598 8.43499 8.75 8.6525 8.75 8.875C8.75 9.17337 8.86853 9.45952 9.0795 9.6705C9.29048 9.88147 9.57663 10 9.875 10ZM6.875 16.75C7.0975 16.75 7.31501 16.684 7.50002 16.5604C7.68502 16.4368 7.82922 16.2611 7.91436 16.0555C7.99951 15.85 8.02179 15.6238 7.97838 15.4055C7.93498 15.1873 7.82783 14.9868 7.6705 14.8295C7.51316 14.6722 7.31271 14.565 7.09448 14.5216C6.87625 14.4782 6.65005 14.5005 6.44448 14.5856C6.23891 14.6708 6.06321 14.815 5.9396 15C5.81598 15.185 5.75 15.4025 5.75 15.625C5.75 15.9234 5.86853 16.2095 6.0795 16.4205C6.29048 16.6315 6.57663 16.75 6.875 16.75ZM15.875 12.25C16.0975 12.25 16.315 12.184 16.5 12.0604C16.685 11.9368 16.8292 11.7611 16.9144 11.5555C16.9995 11.35 17.0218 11.1238 16.9784 10.9055C16.935 10.6873 16.8278 10.4868 16.6705 10.3295C16.5132 10.1722 16.3127 10.065 16.0945 10.0216C15.8762 9.97821 15.65 10.0005 15.4445 10.0856C15.2389 10.1708 15.0632 10.315 14.9396 10.5C14.816 10.685 14.75 10.9025 14.75 11.125C14.75 11.4234 14.8685 11.7095 15.0795 11.9205C15.2905 12.1315 15.5766 12.25 15.875 12.25ZM18.125 8.5C18.3475 8.5 18.565 8.43402 18.75 8.3104C18.935 8.18679 19.0792 8.01109 19.1644 7.80552C19.2495 7.59995 19.2718 7.37375 19.2284 7.15552C19.185 6.93729 19.0778 6.73684 18.9205 6.5795C18.7632 6.42217 18.5627 6.31502 18.3445 6.27162C18.1262 6.22821 17.9 6.25049 17.6945 6.33564C17.4889 6.42078 17.3132 6.56498 17.1896 6.74998C17.066 6.93499 17 7.1525 17 7.375C17 7.67337 17.1185 7.95952 17.3295 8.1705C17.5405 8.38147 17.8266 8.5 18.125 8.5ZM16.25 15.625C16.25 15.8475 16.316 16.065 16.4396 16.25C16.5632 16.435 16.7389 16.5792 16.9445 16.6644C17.15 16.7495 17.3762 16.7718 17.5945 16.7284C17.8127 16.685 18.0132 16.5778 18.1705 16.4205C18.3278 16.2632 18.435 16.0627 18.4784 15.8445C18.5218 15.6262 18.4995 15.4 18.4144 15.1945C18.3292 14.9889 18.185 14.8132 18 14.6896C17.815 14.566 17.5975 14.5 17.375 14.5C17.0766 14.5 16.7905 14.6185 16.5795 14.8295C16.3685 15.0405 16.25 15.3266 16.25 15.625Z"
fill="white"
/>
</svg>
);

export default ChartScatter;
76 changes: 76 additions & 0 deletions src/components/icons/ChartStackedHorizontal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { SVGAttributes } from "react";

const ChartStackedHorizontal = (props: SVGAttributes<SVGElement>) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M3.5 3L3.5 21"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.5 14.333L15.5 14.333V18C15.5 18.552 15.052 19 14.5 19H3.5L3.5 14.333Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.5 14.3301H10.5V17.9994C10.5 18.5518 10.2387 19.0001 9.91667 19.0001H3.5L3.5 14.3301Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.5 9.66699L20.5 9.66699C21.052 9.66699 21.5 10.115 21.5 10.667V13.334C21.5 13.886 21.052 14.334 20.5 14.334H3.5L3.5 9.66699Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.5 9.66992H12C12.276 9.66992 12.5 10.1182 12.5 10.6706V13.3393C12.5 13.8916 12.276 14.3399 12 14.3399H3.5L3.5 9.66992Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.5 5L17.5 5C18.052 5 18.5 5.448 18.5 6V9.667H3.5L3.5 5Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.5 5L10.0333 5C10.2909 5 10.5 5.44829 10.5 6.00064V9.67H3.5L3.5 5Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

export default ChartStackedHorizontal;
76 changes: 76 additions & 0 deletions src/components/icons/ChartStackedVertical.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { SVGAttributes } from "react";

const ChartStackedVertical = (props: SVGAttributes<SVGElement>) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M3 21H21"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M14.333 21V9H18C18.552 9 19 9.448 19 10V21H14.333Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M14.3301 21V14H17.9994C18.5518 14 19.0001 14.2613 19.0001 14.5833V21H14.3301Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.66699 21L9.66699 4C9.66699 3.448 10.115 3 10.667 3H13.334C13.886 3 14.334 3.448 14.334 4V21H9.66699Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.66992 21V12.5C9.66992 12.224 10.1182 12 10.6706 12H13.3393C13.8916 12 14.3399 12.224 14.3399 12.5V21H9.66992Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5 21L5 7C5 6.448 5.448 6 6 6H9.667V21H5Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5 21V14.4667C5 14.2091 5.44829 14 6.00064 14H9.67V21H5Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

export default ChartStackedVertical;

0 comments on commit 9ee23e1

Please sign in to comment.