fix(icons): fix builds + release

.vscode/settings.json

@@ -4,11 +4,11 @@
     ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ],
   "editor.codeActionsOnSave": {
-    "source.addMissingImports": true,
-    "source.fixAll": true,
-    "source.fixAll.eslint": true,
-    "source.sortMembers": true,
-    "source.organizeImports": true
+    "source.addMissingImports": "explicit",
+    "source.fixAll": "explicit",
+    "source.fixAll.eslint": "explicit",
+    "source.sortMembers": "explicit",
+    "source.organizeImports": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnPaste": true,

packages/frosted-ui-icons/README.md

@@ -13,19 +13,19 @@ All icons are available as individual React components. Each icon may come in mu
 Install Frosted UI Icons from npm:
 
 ```bash
-npm install frosted-ui-icons
+npm install @frosted-ui/icons
 ```
 
 Import the icons into your React project:
 
 ```tsx
-import { Store16Icon, Store20Icon } from 'frosted-ui-icons';
+import { Store16, Store20 } from '@frosted-ui/icons';
 
 function MyComponent() {
   return (
     <div>
-      <Store16Icon />
-      <Store20Icon />
+      <Store16 />
+      <Store20 />
     </div>
   );
 }

packages/frosted-ui-icons/manifest.json

@@ -5,7 +5,10 @@
       "store-16": "icons/default/store-16.svg",
       "grid-16": "icons/default/grid-16.svg",
       "gear-20": "icons/default/gear-20.svg",
-      "trash-20": "icons/default/trash-20.svg"
+      "trash-20": "icons/default/trash-20.svg",
+      "youtube-20": "icons/default/youtube-20.svg",
+      "facebook-20": "icons/default/facebook-20.svg",
+      "twitter-20": "icons/default/twitter-20.svg"
     }
   }
 }

packages/frosted-ui-icons/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "frosted-ui-icons",
+  "name": "@frosted-ui/icons",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.1-canary.0",
   "license": "MIT",
   "description": "Frosted UI React Icons",
   "main": "./dist/cjs/index.js",
@@ -42,7 +42,9 @@
     "react": "^16.x || ^17.x || ^18.x"
   },
   "devDependencies": {
+    "@types/react": "^16.8.17",
     "generate-icon-lib": "*",
+    "react": "17.0.2",
     "rimraf": "^5.0.5"
   }
 }

packages/frosted-ui-icons/src/Facebook20.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { IconProps } from './types';
+
+export const Facebook20 = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        data-fui-icon="true"
+        {...props}
+        ref={forwardedRef}
+      >
+        <g clipPath="url(#clip0_45_57)">
+          <path
+            d="M20 10.0609C20 15.0913 16.3306 19.2698 11.5323 20V12.9817H13.871L14.3145 10.0609H11.5323V8.19473C11.5323 7.38337 11.9355 6.61258 13.1855 6.61258H14.4355V4.13793C14.4355 4.13793 13.3065 3.93509 12.1774 3.93509C9.91935 3.93509 8.42742 5.35497 8.42742 7.87018V10.0609H5.8871V12.9817H8.42742V20C3.62903 19.2698 0 15.0913 0 10.0609C0 4.50304 4.47581 0 10 0C15.5242 0 20 4.50304 20 10.0609Z"
+            fill={color}
+            fillOpacity=".93"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_45_57">
+            <path fill={color} d="M0 0H20V20H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  },
+);
+
+export default Facebook20;

packages/frosted-ui-icons/src/Gear20Icon.tsx → packages/frosted-ui-icons/src/Gear20.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IconProps } from './types';
 
-export const Gear20Icon = React.forwardRef<SVGSVGElement, IconProps>(
+export const Gear20 = React.forwardRef<SVGSVGElement, IconProps>(
   ({ color = 'currentColor', ...props }, forwardedRef) => {
     return (
       <svg
@@ -50,4 +50,4 @@ export const Gear20Icon = React.forwardRef<SVGSVGElement, IconProps>(
   },
 );
 
-export default Gear20Icon;
+export default Gear20;

packages/frosted-ui-icons/src/Grid16Icon.tsx → packages/frosted-ui-icons/src/Grid16.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IconProps } from './types';
 
-export const Grid16Icon = React.forwardRef<SVGSVGElement, IconProps>(
+export const Grid16 = React.forwardRef<SVGSVGElement, IconProps>(
   ({ color = 'currentColor', ...props }, forwardedRef) => {
     return (
       <svg
@@ -25,4 +25,4 @@ export const Grid16Icon = React.forwardRef<SVGSVGElement, IconProps>(
   },
 );
 
-export default Grid16Icon;
+export default Grid16;

packages/frosted-ui-icons/src/Store16Icon.tsx → packages/frosted-ui-icons/src/Store16.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IconProps } from './types';
 
-export const Store16Icon = React.forwardRef<SVGSVGElement, IconProps>(
+export const Store16 = React.forwardRef<SVGSVGElement, IconProps>(
   ({ color = 'currentColor', ...props }, forwardedRef) => {
     return (
       <svg
@@ -25,4 +25,4 @@ export const Store16Icon = React.forwardRef<SVGSVGElement, IconProps>(
   },
 );
 
-export default Store16Icon;
+export default Store16;

packages/frosted-ui-icons/src/Store20Icon.tsx → packages/frosted-ui-icons/src/Store20.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IconProps } from './types';
 
-export const Store20Icon = React.forwardRef<SVGSVGElement, IconProps>(
+export const Store20 = React.forwardRef<SVGSVGElement, IconProps>(
   ({ color = 'currentColor', ...props }, forwardedRef) => {
     return (
       <svg
@@ -25,4 +25,4 @@ export const Store20Icon = React.forwardRef<SVGSVGElement, IconProps>(
   },
 );
 
-export default Store20Icon;
+export default Store20;

packages/frosted-ui-icons/src/Trash20Icon.tsx → packages/frosted-ui-icons/src/Trash20.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IconProps } from './types';
 
-export const Trash20Icon = React.forwardRef<SVGSVGElement, IconProps>(
+export const Trash20 = React.forwardRef<SVGSVGElement, IconProps>(
   ({ color = 'currentColor', ...props }, forwardedRef) => {
     return (
       <svg
@@ -32,4 +32,4 @@ export const Trash20Icon = React.forwardRef<SVGSVGElement, IconProps>(
   },
 );
 
-export default Trash20Icon;
+export default Trash20;

packages/frosted-ui-icons/src/Twitter20.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { IconProps } from './types';
+
+export const Twitter20 = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        data-fui-icon="true"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M17.9648 5.21928C17.9648 5.4241 17.9648 5.58795 17.9648 5.79277C17.9648 11.4867 13.8552 18 6.30137 18C3.95303 18 1.80039 17.3036 0 16.0747C0.313112 16.1157 0.626223 16.1566 0.978474 16.1566C2.89628 16.1566 4.65753 15.4602 6.06654 14.3133C4.26614 14.2723 2.73973 13.0434 2.23092 11.3229C2.50489 11.3639 2.73973 11.4048 3.0137 11.4048C3.36595 11.4048 3.75734 11.3229 4.07045 11.241C2.19178 10.8313 0.782779 9.11084 0.782779 7.02169V6.98072C1.33072 7.30843 1.99609 7.47229 2.66145 7.51325C1.52642 6.73494 0.821918 5.4241 0.821918 3.9494C0.821918 3.13012 1.01761 2.39277 1.36986 1.77831C3.40509 4.35904 6.45793 6.07952 9.86301 6.28434C9.78474 5.95663 9.7456 5.62892 9.7456 5.3012C9.7456 2.9253 11.5851 1 13.8552 1C15.0294 1 16.0861 1.49157 16.8689 2.35181C17.7691 2.14699 18.6693 1.77831 19.4521 1.28675C19.1389 2.31084 18.5127 3.13012 17.6517 3.66265C18.4736 3.58072 19.2955 3.33494 20 3.00723C19.4521 3.86747 18.7476 4.60482 17.9648 5.21928Z"
+          fill={color}
+          fillOpacity=".93"
+        />
+      </svg>
+    );
+  },
+);
+
+export default Twitter20;

packages/frosted-ui-icons/src/YouTube20.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { IconProps } from './types';
+
+export const YouTube20 = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        data-fui-icon="true"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M19.5612 5.22396C20 6.75521 20 10.0365 20 10.0365C20 10.0365 20 13.2812 19.5612 14.849C19.3419 15.724 18.6472 16.3802 17.8062 16.599C16.234 17 10.0183 17 10.0183 17C10.0183 17 3.766 17 2.19378 16.599C1.35283 16.3802 0.658135 15.724 0.438757 14.849C0 13.2812 0 10.0365 0 10.0365C0 10.0365 0 6.75521 0.438757 5.22396C0.658135 4.34896 1.35283 3.65625 2.19378 3.4375C3.766 3 10.0183 3 10.0183 3C10.0183 3 16.234 3 17.8062 3.4375C18.6472 3.65625 19.3419 4.34896 19.5612 5.22396ZM7.97075 12.9896L13.1627 10.0365L7.97075 7.08333V12.9896Z"
+          fill={color}
+          fillOpacity=".93"
+        />
+      </svg>
+    );
+  },
+);
+
+export default YouTube20;

packages/frosted-ui-icons/src/index.tsx

@@ -1,5 +1,8 @@
-export { default as Store20Icon } from './Store20Icon';
-export { default as Store16Icon } from './Store16Icon';
-export { default as Grid16Icon } from './Grid16Icon';
-export { default as Gear20Icon } from './Gear20Icon';
-export { default as Trash20Icon } from './Trash20Icon';
+export { default as Store20 } from './Store20';
+export { default as Store16 } from './Store16';
+export { default as Grid16 } from './Grid16';
+export { default as Gear20 } from './Gear20';
+export { default as Trash20 } from './Trash20';
+export { default as YouTube20 } from './YouTube20';
+export { default as Facebook20 } from './Facebook20';
+export { default as Twitter20 } from './Twitter20';

packages/frosted-ui/package.json

@@ -105,6 +105,7 @@
     }
   },
   "devDependencies": {
+    "@frosted-ui/icons": "workspace:*",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
     "@storybook/addon-links": "^7.4.6",
@@ -120,7 +121,6 @@
     "autoprefixer": "^10.4.16",
     "eslint": "^8.15.0",
     "eslint-config-custom": "*",
-    "frosted-ui-icons": "*",
     "postcss": "^8.4.30",
     "postcss-cli": "^10.1.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",

packages/generate-icon-lib/.env

@@ -0,0 +1 @@
+FIGMA_ACCESS_TOKEN=figd_WIKyi_XfpN1jIASKqHwTHP34y3rR9blRqsMKKhy-

packages/generate-icon-lib/src/services.ts

@@ -293,7 +293,10 @@ export function getIconsPage(document: IFigmaDocument): IFigmaCanvas | null {
 export function getIcons(iconsCanvas: IFigmaCanvas): IIcons {
   return iconsCanvas.children.reduce((icons: IIcons, iconSetNode) => {
     // We technically don't want icon sets to be in Groups, but we should still allow it
-    if (iconSetNode.type === 'FRAME' || iconSetNode.type === 'GROUP') {
+    if (
+      (iconSetNode.type === 'FRAME' || iconSetNode.type === 'GROUP') &&
+      iconSetNode.name === 'Icons/Default'
+    ) {
       iconSetNode.children.forEach(iconNode => {
         // Our individual icons frames may be Figma "Components" 🤙
         if (iconNode.type === 'FRAME' || iconNode.type === 'COMPONENT') {
@@ -424,13 +427,13 @@ export async function generateReactComponents(icons: IIcons) {
       return firstIcon.type;
     },
     iconToComponentName(icon: ITemplateIcon) {
-      return `${icon.jsxName}Icon`;
+      return `${icon.jsxName}`;
     },
     iconToPropsName(icon: ITemplateIcon) {
-      return `${icon.jsxName}IconProps`;
+      return `${icon.jsxName}Props`;
     },
     iconToReactFileName(icon: ITemplateIcon) {
-      return `${icon.jsxName}Icon.tsx`;
+      return `${icon.jsxName}.tsx`;
     },
     iconToSVGSourceAsJSX(icon: ITemplateIcon, size: string, type: string) {
       const filePath = labelling.filePathFromIcon({