[filigran-icon] add new icons

FiligranHQ · Aug 29, 2024 · 00b7de7 · 00b7de7
1 parent 209a81a
commit 00b7de7
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 20 deletions.
diff --git a/packages/filigran-icon/assets/Group 6.svg b/packages/filigran-icon/assets/Group 6.svg
diff --git a/packages/filigran-icon/assets/Polygon 5.svg b/packages/filigran-icon/assets/Polygon 5.svg
diff --git a/packages/filigran-icon/assets/check_indeterminate.svg b/packages/filigran-icon/assets/check_indeterminate.svg
diff --git a/packages/filigran-icon/assets/check_indeterminate_small_bold.svg b/packages/filigran-icon/assets/check_indeterminate_small_bold.svg
diff --git a/packages/filigran-icon/assets/circle_close.svg b/packages/filigran-icon/assets/circle_close.svg
diff --git a/packages/filigran-icon/assets/threat-actor-individual.svg b/packages/filigran-icon/assets/threat-actor-individual.svg
diff --git a/packages/filigran-icon/script/fetchFromFigma.mjs b/packages/filigran-icon/script/fetchFromFigma.mjs
@@ -19,14 +19,13 @@ const createFiles = (illustrations) => {
 
 const getIllustrationName = (components) => {
   const ids = components.map(({id}) => id);
-
   return fetch(
     `https://api.figma.com/v1/images/${FIGMA_FILE_ID}?ids=${ids.join()}&format=svg`,
     { headers: { 'X-Figma-Token': FIGMA_API_TOKEN } }
   )
     .then(response => response.json())
     .then(({images}) => Promise.all(
-      components.map(({id, name}) => fetch(images[id])
+      components.filter(({id}) => images[id]).map(({id, name}) => fetch(images[id])
         .then(response => response.text())
         .then(svg => ({
           name, // or "name: getIllustrationName,"

diff --git a/packages/filigran-icon/src/CheckIndeterminate.tsx b/packages/filigran-icon/src/CheckIndeterminate.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import type { SVGRProps } from "../model/svgr";
+const SvgCheckIndeterminate = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 20"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <mask
+      id="check_indeterminate_svg__a"
+      width={24}
+      height={24}
+      x={-2}
+      y={-2}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path fill="currentColor" d="M-2-2h24v24H-2z" />
+    </mask>
+    <g mask="url(#check_indeterminate_svg__a)">
+      <path
+        fill="currentColor"
+        d="M10 15q.424 0 .713-.287A.97.97 0 0 0 11 14a.97.97 0 0 0-.287-.713A.97.97 0 0 0 10 13a.97.97 0 0 0-.713.287A.97.97 0 0 0 9 14q0 .424.287.713Q9.576 15 10 15m-1-4h2V5H9zm1 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137Q1.575 15.725.788 13.9A9.7 9.7 0 0 1 0 10q0-2.074.788-3.9a10.1 10.1 0 0 1 2.137-3.175Q4.275 1.575 6.1.788A9.7 9.7 0 0 1 10 0q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 20 10a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 10 20m0-2q3.35 0 5.675-2.325T18 10t-2.325-5.675T10 2 4.325 4.325 2 10t2.325 5.675T10 18"
+      />
+    </g>
+  </svg>
+);
+export default SvgCheckIndeterminate;
diff --git a/packages/filigran-icon/src/CircleClose.tsx b/packages/filigran-icon/src/CircleClose.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import type { SVGRProps } from "../model/svgr";
+const SvgCircleClose = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 20"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <mask
+      id="circle_close_svg__a"
+      width={24}
+      height={24}
+      x={-2}
+      y={-2}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path fill="currentColor" d="M-2-2h24v24H-2z" />
+    </mask>
+    <g mask="url(#circle_close_svg__a)">
+      <path
+        fill="currentColor"
+        d="m6.4 15 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L15 6.4 13.6 5 10 8.6 6.4 5 5 6.4 8.6 10 5 13.6zm3.6 5a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137Q1.575 15.725.788 13.9A9.7 9.7 0 0 1 0 10q0-2.074.788-3.9a10.1 10.1 0 0 1 2.137-3.175Q4.275 1.575 6.1.788A9.7 9.7 0 0 1 10 0q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 20 10a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 10 20m0-2q3.35 0 5.675-2.325T18 10t-2.325-5.675T10 2 4.325 4.325 2 10t2.325 5.675T10 18"
+      />
+    </g>
+  </svg>
+);
+export default SvgCircleClose;
diff --git a/packages/filigran-icon/src/ThreatActorIndividual.tsx b/packages/filigran-icon/src/ThreatActorIndividual.tsx
@@ -17,7 +17,7 @@ const SvgThreatActorIndividual = ({
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       fill="currentColor"
-      d="M30.833 6.167a3.08 3.08 0 0 1 3.084 3.083v15.417a3.073 3.073 0 0 1-3.084 3.083H37v3.083H0V27.75h6.167a3.083 3.083 0 0 1-3.084-3.083V9.25a3.073 3.073 0 0 1 3.084-3.083zm0 3.083H6.167v15.417h24.666zM18.5 18.5c3.407 0 6.167 1.388 6.167 3.083v1.542H12.333v-1.542c0-1.695 2.76-3.083 6.167-3.083m0-7.708a3.08 3.08 0 0 1 3.083 3.083 3.08 3.08 0 0 1-3.083 3.083 3.073 3.073 0 0 1-3.083-3.083 3.08 3.08 0 0 1 3.083-3.083"
+      d="M30.833 6.167a3.08 3.08 0 0 1 3.084 3.083v15.417a3.073 3.073 0 0 1-3.084 3.083H37v3.083H0V27.75h6.167a3.083 3.083 0 0 1-3.084-3.083V9.25a3.073 3.073 0 0 1 3.084-3.083zm0 3.083H6.167v15.417h24.666zM18.5 18.5c3.407 0 6.167 1.387 6.167 3.083v1.542H12.333v-1.542c0-1.695 2.76-3.083 6.167-3.083m0-7.708a3.08 3.08 0 0 1 3.083 3.083 3.08 3.08 0 0 1-3.083 3.083 3.073 3.073 0 0 1-3.083-3.083 3.08 3.08 0 0 1 3.083-3.083"
     />
   </svg>
 );

diff --git a/packages/filigran-icon/src/index.ts b/packages/filigran-icon/src/index.ts
@@ -22,10 +22,11 @@ export const ChannelIcon = lazy(() => import("./Channel"));
 export const CheckIcon = lazy(() => import("./Check"));
 export const ChecklistRtlIcon = lazy(() => import("./ChecklistRtl"));
 export const CheckBoldIcon = lazy(() => import("./CheckBold"));
-export const CheckIndeterminateSmallBoldIcon = lazy(
-  () => import("./CheckIndeterminateSmallBold"),
+export const CheckIndeterminateIcon = lazy(
+  () => import("./CheckIndeterminate"),
 );
 export const ChevronIcon = lazy(() => import("./Chevron"));
+export const CircleCloseIcon = lazy(() => import("./CircleClose"));
 export const CityIcon = lazy(() => import("./City"));
 export const CloseIcon = lazy(() => import("./Close"));
 export const ConstructionIcon = lazy(() => import("./Construction"));

diff --git a/projects/filigran-website/content/docs/components/badge.mdx b/projects/filigran-website/content/docs/components/badge.mdx
@@ -8,6 +8,8 @@ Badge
 <Badge style={{color: '#c73220'}}>Custom Hex</Badge>
 <Badge style={{color: 'hsl(24, 12%, 68%)'}}>Custom HSL</Badge>
 <Badge style={{color: 'rgb(183, 171, 232)'}}>Custom RGB</Badge>
+<Badge variant="secondary">Secondary</Badge>
+<Badge variant="warning">Secondary</Badge>
 <Badge variant="outline">Outline</Badge>
 <Badge variant="destructive">Destructive</Badge>
 
@@ -18,6 +20,7 @@ Badge
           <div className={tw(\`flex gap-2\`)}>
             <Badge>Badge</Badge>
             <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="warning">Secondary</Badge>
             <Badge variant="outline">Outline</Badge>
             <Badge variant="destructive">Destructive</Badge>
           </div>`}