framer-svg-component-generator - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

build/generate-components.js

@@ -5,7 +5,5 @@ "use strict";
 const svgToJsx = require("svg-to-jsx");
-const utilsPath = `utils`;
 async function default_1(svgs, inputPath, outputPath) {
     console.log(`Generating ${svgs.length} icon components from ${inputPath} to ${outputPath}`);
-    fs.mkdirpSync(`${outputPath}/${utilsPath}`);
-    initialiseUtils(outputPath);
+    initialiseGenericIconComponent(svgs, outputPath);
     for (const svgDefinition of svgs) {
@@ -17,10 +15,6 @@ await svgToJsx(svgDefinition.svg, {
             svgContent = svgContent.replace(/this.props/g, 'props');
-            // Determine what the output directory should be by matching the structure from the input path
-            const outputDirectory = `${outputPath}/${svgDefinition.path
-                .replace(inputPath, '')
-                .replace(svgDefinition.filename, '')}`;
             // Create output directory if it doesn't yet exist
-            fs.mkdirpSync(outputDirectory);
+            fs.mkdirpSync(svgDefinition.outputDirectory);
             // Write the generated component to the output path
-            fs.writeFileSync(`${outputDirectory}${svgDefinition.metadata.name}.tsx`, generateSVGComponent(svgDefinition.metadata.name, svgContent));
+            fs.writeFileSync(`${svgDefinition.outputDirectory}${svgDefinition.metadata.name}.tsx`, generateSVGComponent(svgDefinition.metadata.name, svgContent));
         });
@@ -30,5 +24,4 @@ }
 exports.default = default_1;
-function initialiseUtils(outputPath) {
-    fs.writeFileSync(`${outputPath}/${utilsPath}/createSvgIcon.tsx`, createSvgIconComponent);
-    fs.writeFileSync(`${outputPath}/${utilsPath}/SvgIcon.tsx`, SvgIconComponent);
+function initialiseGenericIconComponent(svgs, outputPath) {
+    fs.writeFileSync(`${outputPath}/Icon.tsx`, generateGenericIconComponent(svgs));
 }
@@ -55,49 +48,43 @@ function generateSVGComponent(name, svgContent) {
 }
-const createSvgIconComponent = `
+function generateGenericIconComponent(svgs) {
+    const componentDescriptions = svgs.reduce((acc, svg) => {
+        acc.push({
+            id: svg.id,
+            name: svg.metadata.name,
+            importPath: `${svg.relativeOutputDirectory}${svg.metadata.name}`
+        });
+        return acc;
+    }, []);
+    return `
 import * as React from 'react';
-import SvgIcon from './SvgIcon';
+import { addPropertyControls, ControlType } from 'framer';
+${componentDescriptions.reduce((acc, component) => {
+        acc += `import { ${component.name} } from "${component.importPath}";\n`;
+        return acc;
+    }, '')}
 
-export default function createSvgIcon(path, displayName) {
-  const Component = React.memo(
-    React.forwardRef((props, ref) => (
-      <SvgIcon ref={ref} {...props}>
-        {path}
-      </SvgIcon>
-    )),
-  );
+const icons = {${componentDescriptions.reduce((acc, component) => {
+        acc += `\n  "${component.id}": ${component.name},`;
+        return acc;
+    }, '')}
+};
 
-  return Component;
-}
-`;
-const SvgIconComponent = `
-import * as React from 'react';
+export function Icon(props) {
+  const NamedIcon = icons[props.icon];
+  return <NamedIcon {...props}/>
+};
 
-const SvgIcon = React.forwardRef(function SvgIcon(props: any, ref) {
-  const {
-    children,
-    classes,
-    className,
-    color = 'inherit',
-    component: Component = 'svg',
-    fontSize = 'default',
-    htmlColor,
-    viewBox = '0 0 24 24',
-    ...other
-  } = props;
-
-  return (
-    <Component
-      focusable="false"
-      viewBox={viewBox}
-      color={htmlColor}
-      ref={ref}
-      {...other}
-    >
-      {children}
-    </Component>
-  );
+addPropertyControls(Icon, {
+  fill: {
+    type: ControlType.Color,
+    title: 'Fill',
+    defaultValue: '#ffffff'
+  },
+  icon: {
+    type: ControlType.Enum,
+    options: ${JSON.stringify(componentDescriptions.map(component => component.id))}
+  }
 });
-
-export default SvgIcon;
-`;
+    `;
+}
 //# sourceMappingURL=generate-components.js.map

build/generate-svg-definition.js

@@ -5,5 +5,9 @@ "use strict";
 const path = require("path");
-async function default_1(filePath, svg) {
+async function default_1(filePath, svg, inputPath, outputPath) {
     let parsedSvg = await svgson_1.parse(svg);
     const filename = path.basename(filePath);
+    const name = filename.replace('.svg', '');
+    const relativeOutputDirectory = `./${filePath
+        .replace(inputPath, '')
+        .replace(filename, '')}`;
     const metadataDefinitions = parsedSvg.children.find((child) => child.name === 'metadata');
@@ -26,6 +30,9 @@ if (!metadataDefinitions) {
     }, {
+        id: `${relativeOutputDirectory.replace('./', '')}${name}`,
         filename,
         path: filePath,
+        outputDirectory: `${outputPath}${outputPath.endsWith('/') ? '' : '/'}${relativeOutputDirectory}`,
+        relativeOutputDirectory,
         metadata: {
-            name: filename.replace('.svg', '')
+            name
         },
@@ -32,0 +39,0 @@ svg: await svgson_1.stringify(parsedSvg)

build/generate.js

@@ -27,3 +27,3 @@ "use strict";
         try {
-            output.push(await generate_svg_definition_1.default(filePath, svg));
+            output.push(await generate_svg_definition_1.default(filePath, svg, inputPath, outputPath));
         }
@@ -37,3 +37,3 @@ catch (err) {
     fs.writeFileSync(`${outputPath}/schema.json`, JSON.stringify(output.map(definition => {
-        const { svg } = definition, rest = __rest(definition, ["svg"]);
+        const { svg, path, filename, outputDirectory, relativeOutputDirectory } = definition, rest = __rest(definition, ["svg", "path", "filename", "outputDirectory", "relativeOutputDirectory"]);
         return rest;
@@ -40,0 +40,0 @@ }), null, 2));

package.json

 {
   "name": "framer-svg-component-generator",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "build/index.js",
@@ -5,0 +5,0 @@ "author": "Iain Kettles <[e-mail]>",

No alert changes

Improved metrics

Total package byte prevSize

21040

9.04%

Worsened metrics

Lines of code

245

-1.61%

No dependency changes