feat(@fluent-ui/icons): Enable icons to be introduced on demand

Author: xinyao27

packages/fluent-ui-icons/builder.ts

@@ -67,16 +67,18 @@ async function worker(): Promise<void> {
       const componentName = getComponentName(svg, false)
       const jsxReplace = template
         .replace('{{jsx}}', toJson(jsx))
-        .replace('{{componentName}}', componentName)
+        .replace('{{componentName}}', toHump(componentName))
       await writeFileAsync(
-        resolve(__dirname, `src/${componentName}.ts`),
+        resolve(__dirname, `src/${toHump(componentName)}.ts`),
         prettier.format(jsxReplace, { singleQuote: true, semi: false, parser: 'typescript' })
       )
     }
 
     const index = allSvg.reduce((acc, cur): string => {
       const componentName = getComponentName(cur, false)
-      return acc + `export { default as ${toHump(componentName)} } from './${componentName}'\n`
+      return (
+        acc + `export { default as ${toHump(componentName)} } from './${toHump(componentName)}'\n`
+      )
     }, '')
     await writeFileAsync(resolve(__dirname, `src/index.ts`), index)
   } catch (error) {

packages/fluent-ui-icons/src/AccountBoxFill.ts

@@ -0,0 +1,35 @@
+import createIcon, { JSX } from './utils/createIcon'
+
+export const jsx: JSX = {
+  type: 'svg',
+  props: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24'
+  },
+  children: [
+    {
+      type: 'g',
+      props: null,
+      children: [
+        {
+          type: 'path',
+          props: {
+            fill: 'none',
+            d: 'M0 0h24v24H0z'
+          },
+          children: []
+        },
+        {
+          type: 'path',
+          props: {
+            d:
+              'M3 4.995C3 3.893 3.893 3 4.995 3h14.01C20.107 3 21 3.893 21 4.995v14.01A1.995 1.995 0 0 1 19.005 21H4.995A1.995 1.995 0 0 1 3 19.005V4.995zM6.357 18h11.49a6.992 6.992 0 0 0-5.745-3 6.992 6.992 0 0 0-5.745 3zM12 13a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'
+          },
+          children: []
+        }
+      ]
+    }
+  ]
+}
+
+export default createIcon(jsx, 'AccountBoxFill')

packages/fluent-ui-icons/src/AccountBoxLine.ts

@@ -0,0 +1,35 @@
+import createIcon, { JSX } from './utils/createIcon'
+
+export const jsx: JSX = {
+  type: 'svg',
+  props: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24'
+  },
+  children: [
+    {
+      type: 'g',
+      props: null,
+      children: [
+        {
+          type: 'path',
+          props: {
+            fill: 'none',
+            d: 'M0 0h24v24H0z'
+          },
+          children: []
+        },
+        {
+          type: 'path',
+          props: {
+            d:
+              'M3 4.995C3 3.893 3.893 3 4.995 3h14.01C20.107 3 21 3.893 21 4.995v14.01A1.995 1.995 0 0 1 19.005 21H4.995A1.995 1.995 0 0 1 3 19.005V4.995zM5 5v14h14V5H5zm2.972 13.18a9.983 9.983 0 0 1-1.751-.978A6.994 6.994 0 0 1 12.102 14c2.4 0 4.517 1.207 5.778 3.047a9.995 9.995 0 0 1-1.724 1.025A4.993 4.993 0 0 0 12.102 16c-1.715 0-3.23.864-4.13 2.18zM12 13a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'
+          },
+          children: []
+        }
+      ]
+    }
+  ]
+}
+
+export default createIcon(jsx, 'AccountBoxLine')

packages/fluent-ui-icons/src/AccountCircleFill.ts

@@ -0,0 +1,35 @@
+import createIcon, { JSX } from './utils/createIcon'
+
+export const jsx: JSX = {
+  type: 'svg',
+  props: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24'
+  },
+  children: [
+    {
+      type: 'g',
+      props: null,
+      children: [
+        {
+          type: 'path',
+          props: {
+            fill: 'none',
+            d: 'M0 0h24v24H0z'
+          },
+          children: []
+        },
+        {
+          type: 'path',
+          props: {
+            d:
+              'M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zM6.023 15.416C7.491 17.606 9.695 19 12.16 19c2.464 0 4.669-1.393 6.136-3.584A8.968 8.968 0 0 0 12.16 13a8.968 8.968 0 0 0-6.137 2.416zM12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'
+          },
+          children: []
+        }
+      ]
+    }
+  ]
+}
+
+export default createIcon(jsx, 'AccountCircleFill')

packages/fluent-ui-icons/src/AccountCircleLine.ts

@@ -0,0 +1,35 @@
+import createIcon, { JSX } from './utils/createIcon'
+
+export const jsx: JSX = {
+  type: 'svg',
+  props: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24'
+  },
+  children: [
+    {
+      type: 'g',
+      props: null,
+      children: [
+        {
+          type: 'path',
+          props: {
+            fill: 'none',
+            d: 'M0 0h24v24H0z'
+          },
+          children: []
+        },
+        {
+          type: 'path',
+          props: {
+            d:
+              'M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-4.987-3.744A7.966 7.966 0 0 0 12 20c1.97 0 3.773-.712 5.167-1.892A6.979 6.979 0 0 0 12.16 16a6.981 6.981 0 0 0-5.147 2.256zM5.616 16.82A8.975 8.975 0 0 1 12.16 14a8.972 8.972 0 0 1 6.362 2.634 8 8 0 1 0-12.906.187zM12 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'
+          },
+          children: []
+        }
+      ]
+    }
+  ]
+}
+
+export default createIcon(jsx, 'AccountCircleLine')

packages/fluent-ui-icons/src/AccountPinBoxFill.ts

@@ -0,0 +1,35 @@
+import createIcon, { JSX } from './utils/createIcon'
+
+export const jsx: JSX = {
+  type: 'svg',
+  props: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24'
+  },
+  children: [
+    {
+      type: 'g',
+      props: null,
+      children: [
+        {
+          type: 'path',
+          props: {
+            fill: 'none',
+            d: 'M0 0h24v24H0z'
+          },
+          children: []
+        },
+        {
+          type: 'path',
+          props: {
+            d:
+              'M14 21l-2 2-2-2H4.995A1.995 1.995 0 0 1 3 19.005V4.995C3 3.893 3.893 3 4.995 3h14.01C20.107 3 21 3.893 21 4.995v14.01A1.995 1.995 0 0 1 19.005 21H14zm-7.643-3h11.49a6.992 6.992 0 0 0-5.745-3 6.992 6.992 0 0 0-5.745 3zM12 13a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'
+          },
+          children: []
+        }
+      ]
+    }
+  ]
+}
+
+export default createIcon(jsx, 'AccountPinBoxFill')

packages/fluent-ui-icons/src/AccountPinBoxLine.ts

@@ -0,0 +1,35 @@
+import createIcon, { JSX } from './utils/createIcon'
+
+export const jsx: JSX = {
+  type: 'svg',
+  props: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24'
+  },
+  children: [
+    {
+      type: 'g',
+      props: null,
+      children: [
+        {
+          type: 'path',
+          props: {
+            fill: 'none',
+            d: 'M0 0h24v24H0z'
+          },
+          children: []
+        },
+        {
+          type: 'path',
+          props: {
+            d:
+              'M14 21l-2 2-2-2H4.995A1.995 1.995 0 0 1 3 19.005V4.995C3 3.893 3.893 3 4.995 3h14.01C20.107 3 21 3.893 21 4.995v14.01A1.995 1.995 0 0 1 19.005 21H14zm5-2V5H5v14h5.828L12 20.172 13.172 19H19zm-11.028-.82a9.983 9.983 0 0 1-1.751-.978A6.994 6.994 0 0 1 12.102 14c2.4 0 4.517 1.207 5.778 3.047a9.995 9.995 0 0 1-1.724 1.025A4.993 4.993 0 0 0 12.102 16c-1.715 0-3.23.864-4.13 2.18zM12 13a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'
+          },
+          children: []
+        }
+      ]
+    }
+  ]
+}
+
+export default createIcon(jsx, 'AccountPinBoxLine')

packages/fluent-ui-icons/src/AccountPinCircleFill.ts

@@ -0,0 +1,35 @@
+import createIcon, { JSX } from './utils/createIcon'
+
+export const jsx: JSX = {
+  type: 'svg',
+  props: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24'
+  },
+  children: [
+    {
+      type: 'g',
+      props: null,
+      children: [
+        {
+          type: 'path',
+          props: {
+            fill: 'none',
+            d: 'M0 0h24v24H0z'
+          },
+          children: []
+        },
+        {
+          type: 'path',
+          props: {
+            d:
+              'M14.256 21.744L12 24l-2.256-2.256C5.31 20.72 2 16.744 2 12 2 6.48 6.48 2 12 2s10 4.48 10 10c0 4.744-3.31 8.72-7.744 9.744zm-8.233-6.328C7.491 17.606 9.695 19 12.16 19c2.464 0 4.669-1.393 6.136-3.584A8.968 8.968 0 0 0 12.16 13a8.968 8.968 0 0 0-6.137 2.416zM12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'
+          },
+          children: []
+        }
+      ]
+    }
+  ]
+}
+
+export default createIcon(jsx, 'AccountPinCircleFill')

packages/fluent-ui-icons/src/AccountPinCircleLine.ts

@@ -0,0 +1,35 @@
+import createIcon, { JSX } from './utils/createIcon'
+
+export const jsx: JSX = {
+  type: 'svg',
+  props: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24'
+  },
+  children: [
+    {
+      type: 'g',
+      props: null,
+      children: [
+        {
+          type: 'path',
+          props: {
+            fill: 'none',
+            d: 'M0 0h24v24H0z'
+          },
+          children: []
+        },
+        {
+          type: 'path',
+          props: {
+            d:
+              'M9.745 21.745C5.308 20.722 2 16.747 2 12 2 6.477 6.477 2 12 2s10 4.477 10 10c0 4.747-3.308 8.722-7.745 9.745L12 24l-2.255-2.255zm-2.733-3.488a7.953 7.953 0 0 0 3.182 1.539l.56.129L12 21.172l1.247-1.247.56-.13a7.956 7.956 0 0 0 3.36-1.686A6.979 6.979 0 0 0 12.16 16c-2.036 0-3.87.87-5.148 2.257zM5.616 16.82A8.975 8.975 0 0 1 12.16 14a8.972 8.972 0 0 1 6.362 2.634 8 8 0 1 0-12.906.187zM12 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'
+          },
+          children: []
+        }
+      ]
+    }
+  ]
+}
+
+export default createIcon(jsx, 'AccountPinCircleLine')

packages/fluent-ui-icons/src/AddBoxFill.ts

@@ -0,0 +1,35 @@
+import createIcon, { JSX } from './utils/createIcon'
+
+export const jsx: JSX = {
+  type: 'svg',
+  props: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24'
+  },
+  children: [
+    {
+      type: 'g',
+      props: null,
+      children: [
+        {
+          type: 'path',
+          props: {
+            fill: 'none',
+            d: 'M0 0h24v24H0z'
+          },
+          children: []
+        },
+        {
+          type: 'path',
+          props: {
+            d:
+              'M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm7 8H7v2h4v4h2v-4h4v-2h-4V7h-2v4z'
+          },
+          children: []
+        }
+      ]
+    }
+  ]
+}
+
+export default createIcon(jsx, 'AddBoxFill')

packages/fluent-ui-icons/src/AddBoxLine.ts

@@ -0,0 +1,35 @@
+import createIcon, { JSX } from './utils/createIcon'
+
+export const jsx: JSX = {
+  type: 'svg',
+  props: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24'
+  },
+  children: [
+    {
+      type: 'g',
+      props: null,
+      children: [
+        {
+          type: 'path',
+          props: {
+            fill: 'none',
+            d: 'M0 0h24v24H0z'
+          },
+          children: []
+        },
+        {
+          type: 'path',
+          props: {
+            d:
+              'M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h14V5H5zm6 6V7h2v4h4v2h-4v4h-2v-4H7v-2h4z'
+          },
+          children: []
+        }
+      ]
+    }
+  ]
+}
+
+export default createIcon(jsx, 'AddBoxLine')