fix: avoid inline style, provide default size (#55)

* fix: avoid inline style, provide default size * docs: readme * chore: yarn up `@icona/*` * 0.5.0 * chore: bump & build --------- Co-authored-by: junghyeonsu <[email protected]>
daangn · Dec 2, 2023 · 41c9c47 · 41c9c47
1 parent dab1a21
commit 41c9c47
Show file tree

Hide file tree

Showing 1,162 changed files with 9,826 additions and 15,021 deletions.
diff --git a/.yarn/cache/@icona-generator-npm-0.2.1-cada5c20ba-399815f080.zip b/.yarn/cache/@icona-generator-npm-0.2.1-cada5c20ba-399815f080.zip
diff --git a/.yarn/cache/@icona-generator-npm-0.2.2-0afc2893a7-483ec97ed5.zip b/.yarn/cache/@icona-generator-npm-0.2.2-0afc2893a7-483ec97ed5.zip
diff --git a/...types-npm-0.2.1-5c871d47e0-e81efce865.zip → ...types-npm-0.2.2-adaee08ff5-347ba1512d.zip b/...types-npm-0.2.1-5c871d47e0-e81efce865.zip → ...types-npm-0.2.2-adaee08ff5-347ba1512d.zip
diff --git a/.yarn/cache/@icona-utils-npm-0.2.1-e517045efb-e46b41d1d4.zip b/.yarn/cache/@icona-utils-npm-0.2.1-e517045efb-e46b41d1d4.zip
diff --git a/.yarn/cache/@icona-utils-npm-0.2.2-8f073c4bd8-4f00c22b03.zip b/.yarn/cache/@icona-utils-npm-0.2.2-8f073c4bd8-4f00c22b03.zip
diff --git a/README.md b/README.md
@@ -29,6 +29,7 @@ import { IconName1, IconName2 } from "@seed-design/icon";
 ```jsx
 import { IconName1, IconName2 } from "@seed-design/icon";
 
+// SVG props 사용 가능
 <IconName1 size={20} />;
 ```
 

diff --git a/build.cjs b/build.cjs
@@ -13,7 +13,6 @@ const run = ({ entryPoints }) => {
     outdir: "lib",
     target: "es2019",
     sourcemap: true,
-    minify: true,
   };
 
   Promise.all([

diff --git a/icona.js b/icona.js
@@ -69,31 +69,15 @@ generate({
         template: (variables, { tpl }) => {
           return tpl`
             ${variables.imports};
-            interface Props {
-              size: number | string;
-              className?: string;
-            }
 
-            const SVG = (${variables.props}) => (
+            const ${variables.componentName} = (
+              { size = 24, ...props }: SVGProps<SVGSVGElement> & { size?: number | string },
+              ref: Ref<SVGSVGElement>
+            ) => (
               ${variables.jsx}
             );
 
-            const ${variables.componentName} = (
-              { size, className }: Props,
-              ref: React.ForwardedRef<HTMLSpanElement>,
-            ) => {
-              return (
-                <span
-                  ref={ref}
-                  className={className}
-                  style={{ display: "inline-flex", width: size, height: size }}
-                >
-                  <SVG />
-                </span>
-              )
-            };
-            
-            export default React.forwardRef(${variables.componentName});
+            ${variables.exports}
           `;
         },
         jsxRuntime: "classic",
@@ -135,12 +119,17 @@ generate({
         },
         typescript: true,
         dimensions: false,
+        ref: true,
+        svgProps: {
+          width: "{size}",
+          height: "{size}",
+        },
       },
     },
     png: {
       active: true,
       genMode: "recreate",
       path: "png",
-    }
+    },
   },
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/icon",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "repository": "https://github.com/daangn/seed-icon.git",
   "author": "junghyeonsu <[email protected]>",
   "license": "MIT",
@@ -44,9 +44,9 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.2",
-    "@icona/generator": "^0.2.1",
-    "@icona/types": "^0.2.1",
-    "@icona/utils": "^0.2.1",
+    "@icona/generator": "^0.2.2",
+    "@icona/types": "^0.2.2",
+    "@icona/utils": "^0.2.2",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-prettier": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",

diff --git a/react/IconAddCircleFill.tsx b/react/IconAddCircleFill.tsx
@@ -1,16 +1,24 @@
 import * as React from 'react';
 import type { SVGProps } from 'react';
-interface Props {
-  size: number | string;
-  className?: string;
-}
-const SVG = (props: SVGProps<SVGSVGElement>) => (
+import { Ref, forwardRef } from 'react';
+const IconAddCircleFill = (
+  {
+    size = 24,
+    ...props
+  }: SVGProps<SVGSVGElement> & {
+    size?: number | string,
+  },
+  ref: Ref<SVGSVGElement>
+) => (
   <svg
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     data-seed-icon="true"
-    data-seed-icon-version="0.3.15"
+    data-seed-icon-version="0.5.0"
+    width={size}
+    height={size}
+    ref={ref}
     {...props}
   >
     <g>
@@ -23,22 +31,5 @@ const SVG = (props: SVGProps<SVGSVGElement>) => (
     </g>
   </svg>
 );
-const IconAddCircleFill = (
-  { size, className }: Props,
-  ref: React.ForwardedRef<HTMLSpanElement>
-) => {
-  return (
-    <span
-      ref={ref}
-      className={className}
-      style={{
-        display: 'inline-flex',
-        width: size,
-        height: size,
-      }}
-    >
-      <SVG />
-    </span>
-  );
-};
-export default React.forwardRef(IconAddCircleFill);
+const ForwardRef = forwardRef(IconAddCircleFill);
+export default ForwardRef;
diff --git a/react/IconAddCircleRegular.tsx b/react/IconAddCircleRegular.tsx
@@ -1,16 +1,24 @@
 import * as React from 'react';
 import type { SVGProps } from 'react';
-interface Props {
-  size: number | string;
-  className?: string;
-}
-const SVG = (props: SVGProps<SVGSVGElement>) => (
+import { Ref, forwardRef } from 'react';
+const IconAddCircleRegular = (
+  {
+    size = 24,
+    ...props
+  }: SVGProps<SVGSVGElement> & {
+    size?: number | string,
+  },
+  ref: Ref<SVGSVGElement>
+) => (
   <svg
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     data-seed-icon="true"
-    data-seed-icon-version="0.3.15"
+    data-seed-icon-version="0.5.0"
+    width={size}
+    height={size}
+    ref={ref}
     {...props}
   >
     <g>
@@ -29,22 +37,5 @@ const SVG = (props: SVGProps<SVGSVGElement>) => (
     </g>
   </svg>
 );
-const IconAddCircleRegular = (
-  { size, className }: Props,
-  ref: React.ForwardedRef<HTMLSpanElement>
-) => {
-  return (
-    <span
-      ref={ref}
-      className={className}
-      style={{
-        display: 'inline-flex',
-        width: size,
-        height: size,
-      }}
-    >
-      <SVG />
-    </span>
-  );
-};
-export default React.forwardRef(IconAddCircleRegular);
+const ForwardRef = forwardRef(IconAddCircleRegular);
+export default ForwardRef;
diff --git a/react/IconAddCircleThin.tsx b/react/IconAddCircleThin.tsx
@@ -1,16 +1,24 @@
 import * as React from 'react';
 import type { SVGProps } from 'react';
-interface Props {
-  size: number | string;
-  className?: string;
-}
-const SVG = (props: SVGProps<SVGSVGElement>) => (
+import { Ref, forwardRef } from 'react';
+const IconAddCircleThin = (
+  {
+    size = 24,
+    ...props
+  }: SVGProps<SVGSVGElement> & {
+    size?: number | string,
+  },
+  ref: Ref<SVGSVGElement>
+) => (
   <svg
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     data-seed-icon="true"
-    data-seed-icon-version="0.3.15"
+    data-seed-icon-version="0.5.0"
+    width={size}
+    height={size}
+    ref={ref}
     {...props}
   >
     <g>
@@ -29,22 +37,5 @@ const SVG = (props: SVGProps<SVGSVGElement>) => (
     </g>
   </svg>
 );
-const IconAddCircleThin = (
-  { size, className }: Props,
-  ref: React.ForwardedRef<HTMLSpanElement>
-) => {
-  return (
-    <span
-      ref={ref}
-      className={className}
-      style={{
-        display: 'inline-flex',
-        width: size,
-        height: size,
-      }}
-    >
-      <SVG />
-    </span>
-  );
-};
-export default React.forwardRef(IconAddCircleThin);
+const ForwardRef = forwardRef(IconAddCircleThin);
+export default ForwardRef;
diff --git a/react/IconAddFill.tsx b/react/IconAddFill.tsx
@@ -1,16 +1,24 @@
 import * as React from 'react';
 import type { SVGProps } from 'react';
-interface Props {
-  size: number | string;
-  className?: string;
-}
-const SVG = (props: SVGProps<SVGSVGElement>) => (
+import { Ref, forwardRef } from 'react';
+const IconAddFill = (
+  {
+    size = 24,
+    ...props
+  }: SVGProps<SVGSVGElement> & {
+    size?: number | string,
+  },
+  ref: Ref<SVGSVGElement>
+) => (
   <svg
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     data-seed-icon="true"
-    data-seed-icon-version="0.3.15"
+    data-seed-icon-version="0.5.0"
+    width={size}
+    height={size}
+    ref={ref}
     {...props}
   >
     <g>
@@ -21,22 +29,5 @@ const SVG = (props: SVGProps<SVGSVGElement>) => (
     </g>
   </svg>
 );
-const IconAddFill = (
-  { size, className }: Props,
-  ref: React.ForwardedRef<HTMLSpanElement>
-) => {
-  return (
-    <span
-      ref={ref}
-      className={className}
-      style={{
-        display: 'inline-flex',
-        width: size,
-        height: size,
-      }}
-    >
-      <SVG />
-    </span>
-  );
-};
-export default React.forwardRef(IconAddFill);
+const ForwardRef = forwardRef(IconAddFill);
+export default ForwardRef;
diff --git a/react/IconAddRegular.tsx b/react/IconAddRegular.tsx
@@ -1,16 +1,24 @@
 import * as React from 'react';
 import type { SVGProps } from 'react';
-interface Props {
-  size: number | string;
-  className?: string;
-}
-const SVG = (props: SVGProps<SVGSVGElement>) => (
+import { Ref, forwardRef } from 'react';
+const IconAddRegular = (
+  {
+    size = 24,
+    ...props
+  }: SVGProps<SVGSVGElement> & {
+    size?: number | string,
+  },
+  ref: Ref<SVGSVGElement>
+) => (
   <svg
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     data-seed-icon="true"
-    data-seed-icon-version="0.3.15"
+    data-seed-icon-version="0.5.0"
+    width={size}
+    height={size}
+    ref={ref}
     {...props}
   >
     <g>
@@ -23,22 +31,5 @@ const SVG = (props: SVGProps<SVGSVGElement>) => (
     </g>
   </svg>
 );
-const IconAddRegular = (
-  { size, className }: Props,
-  ref: React.ForwardedRef<HTMLSpanElement>
-) => {
-  return (
-    <span
-      ref={ref}
-      className={className}
-      style={{
-        display: 'inline-flex',
-        width: size,
-        height: size,
-      }}
-    >
-      <SVG />
-    </span>
-  );
-};
-export default React.forwardRef(IconAddRegular);
+const ForwardRef = forwardRef(IconAddRegular);
+export default ForwardRef;