@cyberalien/svg-utils 1.0.6 → 1.0.8

package/lib/components/helpers/filenames/types.js

@@ -1,6 +1,6 @@
 import { getUniqueHash } from "../../../helpers/hash/unique.js";
-import { getGeneratedComponentFilename } from "../../export/filename.js";
 import { getGeneratedAssetFilename } from "./asset.js";
+import { getGeneratedComponentFilename } from "../../export/filename.js";
 
 /**
 * Generate component types filename based on options

package/lib/components/helpers/ts/react.d.ts

@@ -0,0 +1,9 @@
+import { GeneratedAssetFile } from "../../types/component.js";
+import { FactoryIconData } from "../../types/data.js";
+import { ComponentFactoryOptions } from "../../types/options.js";
+import { FactoryComponentProps } from "../props/types.js";
+/**
+ * Add React component types
+ */
+declare const addReactComponentTypes: (data: FactoryIconData, options: ComponentFactoryOptions, assets: GeneratedAssetFile[], props: FactoryComponentProps) => string;
+export { addReactComponentTypes };

package/lib/components/helpers/ts/react.js

@@ -0,0 +1,20 @@
+import { addComponentTypes } from "./wrapper.js";
+
+/**
+* Add React component types
+*/
+const addReactComponentTypes = addComponentTypes.bind(null, `import type { ForwardRefExoticComponent, SVGProps } from 'react';
+
+interface IconProps {
+/* PROPS */
+}
+
+const Component: ForwardRefExoticComponent<
+    Omit<SVGProps<SVGSVGElement>, 'viewBox' | 'width' | 'height' | 'xmlns'> & IconProps
+>;
+
+export { type IconProps };
+export default Component;
+`);
+
+export { addReactComponentTypes };

package/lib/components/helpers/ts/wrapper.js

@@ -1,5 +1,5 @@
-import { getGeneratedComponentTypesFilename } from "../filenames/types.js";
 import { stringifyFactoryPropTypes } from "../props/ts.js";
+import { getGeneratedComponentTypesFilename } from "../filenames/types.js";
 
 /**
 * Add component types

package/lib/components/jsx.d.ts

@@ -0,0 +1,13 @@
+import { FactoryGeneratedComponent } from "./types/component.js";
+import { FactoryIconData } from "./types/data.js";
+import { ComponentFactoryOptions } from "./types/options.js";
+interface Options extends ComponentFactoryOptions {
+  jsx: 'react';
+  fallbackPackage?: string;
+  ts?: boolean;
+}
+/**
+ * Create functional Vue component code
+ */
+declare function createJSXComponent(data: FactoryIconData, options: Options): FactoryGeneratedComponent;
+export { createJSXComponent };

package/lib/components/jsx.js

@@ -0,0 +1,118 @@
+import { getComponentSizeValues } from "./helpers/content/size.js";
+import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
+import { stringifyIconViewBox } from "../svg/viewbox/value.js";
+import { createFactoryImports } from "./helpers/imports/create.js";
+import { generateCSSFilesForComponent } from "./helpers/css/generate.js";
+import { addSizeFunctionAsset } from "./helpers/functions/size.js";
+import { stringifyFactoryPropsAsJSON } from "./helpers/props/object.js";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
+import { makeSquareViewBox } from "../svg/viewbox/square.js";
+import { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/ts.js";
+import { minifyViewBox } from "../svg/viewbox/minify.js";
+import { getViewBoxRatio } from "./helpers/content/ratio.js";
+import { addReactComponentTypes } from "./helpers/ts/react.js";
+
+/**
+* Create functional Vue component code
+*/
+function createJSXComponent(data, options) {
+	const useTS = options.ts ?? false;
+	const assets = [];
+	const imports = createFactoryImports();
+	const dependencies = /* @__PURE__ */ new Set();
+	const importPackage = "react";
+	const createElement = "createElement";
+	const fallbackPackage = options.fallbackPackage || null;
+	const hasFallback = !!(fallbackPackage && data.fallback);
+	if (hasFallback) {
+		imports.named[fallbackPackage] = new Set(["Icon"]);
+		dependencies.add(fallbackPackage);
+	}
+	const reactNamedImports = new Set([createElement]);
+	imports.named[importPackage] = reactNamedImports;
+	const style = generateCSSFilesForComponent(data.icon, imports, assets, options);
+	const isEmbeddedCSS = options.cssMode === "embed";
+	let hasFixedSize = !!options.width && !!options.height;
+	const viewBox = data.viewBox;
+	const hasComputedViewbox = options.square && !hasFixedSize && viewBox.width !== viewBox.height;
+	const isStringViewBox = !hasFallback;
+	const hasComputedRatio = hasComputedViewbox && isStringViewBox;
+	if (!hasComputedViewbox && (options.width || options.height)) hasFixedSize = true;
+	const componentExternalCode = [];
+	const componentInternalCode = [];
+	const props = {};
+	if (!hasFallback) props.xmlns = "http://www.w3.org/2000/svg";
+	props.props = {
+		value: "props",
+		template: "...props,"
+	};
+	const getViewBox = (viewBox$1) => isStringViewBox ? `'${stringifyIconViewBox(viewBox$1)}'` : JSON.stringify(minifyViewBox(viewBox$1));
+	if (hasComputedViewbox) {
+		componentExternalCode.push(`const baseViewBox = ${getViewBox(viewBox)};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`);
+		componentInternalCode.push(`const viewBox = useMemo(() => square ? squareViewBox : baseViewBox, [square]);`);
+	} else componentExternalCode.push(`const viewBox = ${getViewBox(viewBox)};`);
+	const ratioValue = getViewBoxRatio(viewBox);
+	if (hasComputedRatio) componentInternalCode.push(`const ratio = useMemo(() => square ? 1 : ${ratioValue}, [square]);`);
+	if (hasFixedSize) {
+		const sizeProps = getComponentSizeValues(options, data.viewBox);
+		if (!sizeProps) throw new Error("Fixed size expected, but could not be determined");
+		props.width = sizeProps.width;
+		props.height = sizeProps.height;
+	} else if (hasFallback) {
+		props.width = {
+			type: "string",
+			value: "width",
+			template: "width,"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: "height,"
+		};
+	} else {
+		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
+		componentInternalCode.push(`const size = useMemo(() => ${getSizeProps}(width, height, ${hasComputedRatio ? "ratio" : ratioValue}), [width, height${hasComputedRatio ? ", ratio" : ""}]);`);
+		reactNamedImports.add("useMemo");
+		props.width = {
+			type: "string",
+			value: "width",
+			template: "...size,"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: ""
+		};
+	}
+	if (options.square) props.square = { type: "boolean" };
+	props.viewBox = {
+		value: "viewBox",
+		template: "viewBox,"
+	};
+	props.content = {
+		value: stringifyFactoryIconContent(data.icon, options, isEmbeddedCSS ? style : void 0),
+		template: hasFallback ? void 0 : "dangerouslySetInnerHTML: {__html: {value}},"
+	};
+	if (hasFallback && data.fallback) props.fallback = data.fallback;
+	componentInternalCode.push(`return ${createElement}(${hasFallback ? "Icon" : "'svg'"}, {
+\t\t${stringifyFactoryPropsAsJSON(props, "\n		")}
+\t});`);
+	const beforeFunction = componentExternalCode.length ? componentExternalCode.join("\n") + "\n\n" : "";
+	const usedProps = getUsedFactoryProps(props);
+	const propsDestricturing = usedProps.length ? `{${[...usedProps, "...props"].join(", ")}}` : "props";
+	const componentFunction = `function Component${useTS ? `<{\n${stringifyFactoryPropTypes(props)}\n}>` : ""}(${propsDestricturing}) {
+\t${componentInternalCode.join("\n	")}
+}
+`;
+	const content = `${stringifyFactoryImports(imports)}\n${beforeFunction}${componentFunction}\nexport default Component;\n`;
+	const types = addReactComponentTypes(data, options, assets, props);
+	return {
+		assets,
+		content,
+		style: isEmbeddedCSS ? void 0 : style,
+		types,
+		dependencies: dependencies.size ? dependencies : void 0
+	};
+}
+
+export { createJSXComponent };

package/lib/components/raw.js

@@ -1,11 +1,11 @@
 import { getComponentSizeValues } from "./helpers/content/size.js";
 import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
-import { getGeneratedComponentTypesFilename } from "./helpers/filenames/types.js";
 import { stringifyIconViewBox } from "../svg/viewbox/value.js";
 import { createFactoryImports } from "./helpers/imports/create.js";
 import { generateCSSFilesForComponent } from "./helpers/css/generate.js";
-import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
 import { factoryPropTemplate, stringifyFactoryProps } from "./helpers/props/stringify.js";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
+import { getGeneratedComponentTypesFilename } from "./helpers/filenames/types.js";
 
 /**
 * Create raw component code

package/lib/components/svelte.js

@@ -3,14 +3,14 @@ import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
 import { stringifyIconViewBox } from "../svg/viewbox/value.js";
 import { createFactoryImports } from "./helpers/imports/create.js";
 import { generateCSSFilesForComponent } from "./helpers/css/generate.js";
-import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
-import { stringifyFactoryProps } from "./helpers/props/stringify.js";
 import { addSizeFunctionAsset } from "./helpers/functions/size.js";
+import { stringifyFactoryProps } from "./helpers/props/stringify.js";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
 import { makeSquareViewBox } from "../svg/viewbox/square.js";
 import { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/ts.js";
-import { addSvelteComponentTypes } from "./helpers/ts/svelte.js";
 import { minifyViewBox } from "../svg/viewbox/minify.js";
 import { getViewBoxRatio } from "./helpers/content/ratio.js";
+import { addSvelteComponentTypes } from "./helpers/ts/svelte.js";
 
 /**
 * Create Svelte component code
@@ -19,8 +19,12 @@ function createSvelteComponent(data, options) {
 	const useTS = options.ts ?? false;
 	const assets = [];
 	const imports = createFactoryImports();
+	const dependencies = /* @__PURE__ */ new Set();
 	const hasFallback = !!data.fallback;
-	if (hasFallback) imports.default["@iconify/css-svelte"] = "Icon";
+	if (hasFallback) {
+		imports.default["@iconify/css-svelte"] = "Icon";
+		dependencies.add("@iconify/css-svelte");
+	}
 	const styleContent = generateCSSFilesForComponent(data.icon, imports, assets, {
 		...options,
 		componentType: "svelte"
@@ -82,7 +86,8 @@ function createSvelteComponent(data, options) {
 		template: hasFallback ? `content={content} fallback="${data.fallback}"` : ""
 	};
 	const usedProps = getUsedFactoryProps(props);
-	componentCode.unshift(`let {${[...usedProps, "...props"].join(", ")}}${useTS ? ": Props" : ""} = $props();\n`);
+	const propsDestricturing = usedProps.length ? `{${[...usedProps, "...props"].join(", ")}}` : "props";
+	componentCode.unshift(`let ${propsDestricturing}${useTS ? ": Props" : ""} = $props();\n`);
 	if (useTS) componentCode.unshift(`interface Props {\n${stringifyFactoryPropTypes(props)}\n};\n`);
 	const tag = hasFallback ? "Icon" : "svg";
 	const template = `<${tag} ${stringifyFactoryProps(props, "{prop}={{value}}")} {...props}>${innerHTML}</${tag}>`;
@@ -99,7 +104,8 @@ ${template}
 		assets,
 		content,
 		style,
-		types
+		types,
+		dependencies: dependencies.size ? dependencies : void 0
 	};
 }
 

package/lib/components/types/component.d.ts

@@ -19,6 +19,7 @@ interface FactoryGeneratedComponent {
   content: string;
   style?: string;
   types?: string;
+  dependencies?: Set<string>;
 }
 /**
  * Component data with filename

package/lib/components/vue-func.js

@@ -3,14 +3,14 @@ import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
 import { stringifyIconViewBox } from "../svg/viewbox/value.js";
 import { createFactoryImports } from "./helpers/imports/create.js";
 import { generateCSSFilesForComponent } from "./helpers/css/generate.js";
-import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
 import { addSizeFunctionAsset } from "./helpers/functions/size.js";
+import { stringifyFactoryPropsAsJSON } from "./helpers/props/object.js";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
 import { makeSquareViewBox } from "../svg/viewbox/square.js";
 import { getUsedFactoryProps } from "./helpers/props/ts.js";
 import { minifyViewBox } from "../svg/viewbox/minify.js";
 import { getViewBoxRatio } from "./helpers/content/ratio.js";
 import { addVueComponentTypes } from "./helpers/ts/vue.js";
-import { stringifyFactoryPropsAsJSON } from "./helpers/props/object.js";
 
 /**
 * Create functional Vue component code
@@ -18,8 +18,12 @@ import { stringifyFactoryPropsAsJSON } from "./helpers/props/object.js";
 function createVueFunctionalComponent(data, options) {
 	const assets = [];
 	const imports = createFactoryImports();
+	const dependencies = /* @__PURE__ */ new Set();
 	const hasFallback = !!data.fallback;
-	if (hasFallback) imports.named["@iconify/css-vue"] = new Set(["Icon"]);
+	if (hasFallback) {
+		imports.named["@iconify/css-vue"] = new Set(["Icon"]);
+		dependencies.add("@iconify/css-vue");
+	}
 	const vueNamedImports = new Set(["defineComponent", "h"]);
 	imports.named["vue"] = vueNamedImports;
 	const style = generateCSSFilesForComponent(data.icon, imports, assets, options);
@@ -94,7 +98,8 @@ function createVueFunctionalComponent(data, options) {
 		assets,
 		content: `${stringifyFactoryImports(imports)}\n${componentFunction}\nexport default Component;\n`,
 		style: isEmbeddedCSS ? void 0 : style,
-		types
+		types,
+		dependencies: dependencies.size ? dependencies : void 0
 	};
 }
 

package/lib/components/vue.js

@@ -3,9 +3,9 @@ import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
 import { stringifyIconViewBox } from "../svg/viewbox/value.js";
 import { createFactoryImports } from "./helpers/imports/create.js";
 import { generateCSSFilesForComponent } from "./helpers/css/generate.js";
-import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
-import { stringifyFactoryProps } from "./helpers/props/stringify.js";
 import { addSizeFunctionAsset } from "./helpers/functions/size.js";
+import { stringifyFactoryProps } from "./helpers/props/stringify.js";
+import { stringifyFactoryImports } from "./helpers/imports/stringify.js";
 import { makeSquareViewBox } from "../svg/viewbox/square.js";
 import { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/ts.js";
 import { minifyViewBox } from "../svg/viewbox/minify.js";
@@ -19,8 +19,12 @@ function createVueComponent(data, options) {
 	const useTS = options.ts ?? false;
 	const assets = [];
 	const imports = createFactoryImports();
+	const dependencies = /* @__PURE__ */ new Set();
 	const hasFallback = !!data.fallback;
-	if (hasFallback) imports.named["@iconify/css-vue"] = new Set(["Icon"]);
+	if (hasFallback) {
+		imports.named["@iconify/css-vue"] = new Set(["Icon"]);
+		dependencies.add("@iconify/css-vue");
+	}
 	const vueNamedImports = /* @__PURE__ */ new Set();
 	imports.named["vue"] = vueNamedImports;
 	const styleContent = generateCSSFilesForComponent(data.icon, imports, assets, options);
@@ -98,7 +102,8 @@ ${template}
 		assets,
 		content,
 		style,
-		types
+		types,
+		dependencies: dependencies.size ? dependencies : void 0
 	};
 }
 

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "Common functions for working with SVG used by various packages.",
   "author": "Vjacheslav Trushkin",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",