@cyberalien/svg-utils 0.1.6 → 0.1.8

package/lib/components/export/exports.d.ts

@@ -3,6 +3,7 @@ type Types = string | Record<string, string>;
 interface Options {
   ext?: string;
   data?: Record<string, Types>;
+  defaultProp?: string;
 }
 /**
  * Add exports for main files to object

package/lib/components/export/exports.js

@@ -4,9 +4,10 @@
 function createExportsForMainFiles(data, options = {}) {
 	const result = options?.data || Object.create(null);
 	const ext = options.ext || "";
+	const defaultProp = options.defaultProp || "default";
 	for (const { icon, filename, types } of data) result[`./${icon}${ext}`] = types ? {
 		types: `./${types}`,
-		default: `./${filename}`
+		[defaultProp]: `./${filename}`
 	} : `./${filename}`;
 	return result;
 }

package/lib/components/helpers/content/ratio.d.ts

@@ -0,0 +1,6 @@
+import { IconViewBox } from "../../../svg/viewbox/types.js";
+/**
+ * Get viewBox ratio as string
+ */
+declare function getViewBoxRatio(viewBox: IconViewBox): string;
+export { getViewBoxRatio };

package/lib/components/helpers/content/ratio.js

@@ -0,0 +1,9 @@
+/**
+* Get viewBox ratio as string
+*/
+function getViewBoxRatio(viewBox) {
+	const ratio = viewBox.width / viewBox.height;
+	return (Math.ceil(ratio * 100) / 100).toFixed(2).replace(/\.?0+$/, "");
+}
+
+export { getViewBoxRatio };

package/lib/components/helpers/ts/svelte.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 Svelte component types
+ */
+declare const addSvelteComponentTypes: (data: FactoryIconData, options: ComponentFactoryOptions, assets: GeneratedAssetFile[], props: FactoryComponentProps) => string;
+export { addSvelteComponentTypes };

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

@@ -0,0 +1,19 @@
+import { addComponentTypes } from "./wrapper.js";
+
+/**
+* Add Svelte component types
+*/
+const addSvelteComponentTypes = addComponentTypes.bind(null, `import { SvelteComponent } from "svelte";
+import { SvelteHTMLElements } from "svelte/elements";
+
+interface IconProps {
+/* PROPS */
+}
+
+declare class Component extends SvelteComponent<Omit<SvelteHTMLElements['svg'], 'viewBox' | 'width' | 'height' | 'xmlns'> & IconProps & Record<\`data-\${string}\`, string>> {}
+
+export { type IconProps };
+export default Component;
+`);
+
+export { addSvelteComponentTypes };

package/lib/components/helpers/{vue/types.d.ts → ts/vue.d.ts}

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

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

@@ -0,0 +1,18 @@
+import { addComponentTypes } from "./wrapper.js";
+
+/**
+* Add Vue component types
+*/
+const addVueComponentTypes = addComponentTypes.bind(null, `import { DefineSetupFnComponent, PublicProps } from 'vue';
+
+interface IconProps {
+/* PROPS */
+}
+
+declare const Component: DefineSetupFnComponent<IconProps, {}, {}, IconProps & {}, PublicProps>;
+
+export { type IconProps };
+export default Component;
+`);
+
+export { addVueComponentTypes };

package/lib/components/helpers/ts/wrapper.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 component types
+ */
+declare function addComponentTypes(template: string, data: FactoryIconData, options: ComponentFactoryOptions, assets: GeneratedAssetFile[], props: FactoryComponentProps): string;
+export { addComponentTypes };

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

@@ -0,0 +1,18 @@
+import { getGeneratedComponentTypesFilename } from "../filenames/types.js";
+import { stringifyFactoryPropTypes } from "../props/ts.js";
+
+/**
+* Add component types
+*/
+function addComponentTypes(template, data, options, assets, props) {
+	const propTypes = stringifyFactoryPropTypes(props);
+	const content = template.replace("/* PROPS */", propTypes);
+	const filename = getGeneratedComponentTypesFilename(data, content, options);
+	assets.push({
+		...filename,
+		content
+	});
+	return filename.filename;
+}
+
+export { addComponentTypes };

package/lib/components/raw.js

@@ -1,7 +1,7 @@
 import { getComponentSizeValues } from "./helpers/content/size.js";
 import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
 import { getGeneratedComponentTypesFilename } from "./helpers/filenames/types.js";
-import { getIconViewBox } from "../svg/viewbox/value.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";
@@ -18,7 +18,7 @@ function createRawComponent(data, options) {
 	const props = {
 		xmlns: "http://www.w3.org/2000/svg",
 		...getComponentSizeValues(options, data.viewBox),
-		viewBox: getIconViewBox(data.viewBox)
+		viewBox: stringifyIconViewBox(data.viewBox)
 	};
 	const icon = {
 		...data.icon,

package/lib/components/svelte.d.ts

@@ -0,0 +1,12 @@
+import { FactoryGeneratedComponent } from "./types/component.js";
+import { FactoryIconData } from "./types/data.js";
+import { ComponentFactoryOptions } from "./types/options.js";
+interface SvelteOptions extends ComponentFactoryOptions {
+  ts?: boolean;
+  styles?: boolean;
+}
+/**
+ * Create Svelte component code
+ */
+declare function createSvelteComponent(data: FactoryIconData, options: SvelteOptions): FactoryGeneratedComponent;
+export { createSvelteComponent };

package/lib/components/svelte.js

@@ -0,0 +1,105 @@
+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 { stringifyFactoryImports } from "./helpers/imports/stringify.js";
+import { stringifyFactoryProps } from "./helpers/props/stringify.js";
+import { addSizeFunctionAsset } from "./helpers/functions/size.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";
+
+/**
+* Create Svelte component code
+*/
+function createSvelteComponent(data, options) {
+	const useTS = options.ts ?? false;
+	const styleInComponent = options.styles ?? false;
+	const assets = [];
+	const imports = createFactoryImports();
+	const hasFallback = !!data.fallback;
+	if (hasFallback) imports.default["@iconify/css-svelte"] = "Icon";
+	const styleContent = generateCSSFilesForComponent(data.icon, imports, assets, {
+		...options,
+		styleInComponent
+	});
+	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 componentCode = [];
+	const props = {};
+	if (!hasFallback) props.xmlns = "http://www.w3.org/2000/svg";
+	const viewBoxPropValue = `viewBox${hasComputedViewbox ? "Computed" : ""}`;
+	const getViewBox = (viewBox$1) => isStringViewBox ? `'${stringifyIconViewBox(viewBox$1)}'` : JSON.stringify(minifyViewBox(viewBox$1));
+	if (hasComputedViewbox) componentCode.push(`const baseViewBox = ${getViewBox(viewBox)};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `let ${viewBoxPropValue} = $derived(square ? squareViewBox : baseViewBox);`);
+	else componentCode.push(`const ${viewBoxPropValue} = ${getViewBox(viewBox)};`);
+	const ratioValue = getViewBoxRatio(viewBox);
+	if (hasComputedRatio) componentCode.push(`let ratio = $derived(square ? 1 : ${ratioValue});`);
+	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={width}"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: "height={height}"
+		};
+	} else {
+		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
+		componentCode.push(`let size = $derived(${getSizeProps}(width, height, ${hasComputedRatio ? "ratio" : ratioValue}));`);
+		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={${viewBoxPropValue}}`
+	};
+	componentCode.push(`const content = ${stringifyFactoryIconContent(data.icon, options)};`);
+	const innerHTML = hasFallback ? "" : "{@html content}";
+	props.content = {
+		value: "content",
+		template: hasFallback ? `content={content} fallback="${data.fallback}"` : ""
+	};
+	const usedProps = getUsedFactoryProps(props);
+	componentCode.unshift(`let {${[...usedProps, "...props"].join(", ")}}${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}>`;
+	let content = `<script${useTS ? " lang=\"ts\"" : ""}>
+${stringifyFactoryImports(imports)}
+${componentCode.join("\n")}
+<\/script>
+${template}
+`;
+	if (styleContent) content += `<style>\n:global {\n${styleContent}\n}\n</style>\n`;
+	const types = addSvelteComponentTypes(data, options, assets, props);
+	return {
+		assets,
+		content,
+		types
+	};
+}
+
+export { createSvelteComponent };

package/lib/components/vue-func.js

@@ -1,14 +1,16 @@
 import { getComponentSizeValues } from "./helpers/content/size.js";
 import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
-import { getIconViewBox } from "../svg/viewbox/value.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 { getUsedFactoryProps } from "./helpers/props/ts.js";
-import { addVueComponentTypes } from "./helpers/vue/types.js";
 import { addSizeFunctionAsset } from "./helpers/functions/size.js";
-import { stringifyFactoryPropsAsJSON } from "./helpers/props/object.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
@@ -21,13 +23,23 @@ function createVueFunctionalComponent(data, options) {
 	const vueNamedImports = new Set(["defineComponent", "h"]);
 	imports.named["vue"] = vueNamedImports;
 	generateCSSFilesForComponent(data.icon, imports, assets, options);
+	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 componentCode = [];
-	const sizeProps = getComponentSizeValues(options, data.viewBox);
 	const props = {};
 	if (!hasFallback) props.xmlns = "http://www.w3.org/2000/svg";
-	const viewBox = data.viewBox;
-	const isDynanicViewBox = !sizeProps && options.square && viewBox.width !== viewBox.height;
-	if (sizeProps) {
+	const getViewBox = (viewBox$1) => isStringViewBox ? `'${stringifyIconViewBox(viewBox$1)}'` : JSON.stringify(minifyViewBox(viewBox$1));
+	if (hasComputedViewbox) componentCode.push(`const baseViewBox = ${getViewBox(viewBox)};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `const viewBox = computed(() => props.square ? squareViewBox : baseViewBox);`);
+	else componentCode.push(`const viewBox = ${getViewBox(viewBox)};`);
+	const ratioValue = getViewBoxRatio(viewBox);
+	if (hasComputedRatio) componentCode.push(`const ratio = computed(() => props.square ? 1 : ${ratioValue});`);
+	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) {
@@ -43,7 +55,7 @@ function createVueFunctionalComponent(data, options) {
 		};
 	} else {
 		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
-		componentCode.push(`const size = computed(() => ${getSizeProps}(props.width, props.height, viewBox${isDynanicViewBox ? ".value" : ""}));`);
+		componentCode.push(`const size = computed(() => ${getSizeProps}(props.width, props.height, ${hasComputedRatio ? "ratio.value" : ratioValue}));`);
 		vueNamedImports.add("computed");
 		props.width = {
 			type: "string",
@@ -57,21 +69,10 @@ function createVueFunctionalComponent(data, options) {
 		};
 	}
 	if (options.square) props.square = { type: "boolean" };
-	const getViewBox = (viewBox$1) => hasFallback ? JSON.stringify(viewBox$1) : `'${getIconViewBox(viewBox$1)}'`;
-	const viewBoxValue = getViewBox(viewBox);
-	if (isDynanicViewBox) {
-		componentCode.unshift(`const baseViewBox = ${viewBoxValue};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `const viewBox = computed(() => props.square ? squareViewBox : baseViewBox);`);
-		props.viewBox = {
-			value: "viewBox",
-			template: "viewBox: viewBox.value,"
-		};
-	} else {
-		componentCode.unshift(`const viewBox = ${viewBoxValue};`);
-		props.viewBox = {
-			value: "viewBox",
-			template: "viewBox,"
-		};
-	}
+	props.viewBox = {
+		value: "viewBox",
+		template: hasComputedViewbox ? "viewBox: viewBox.value," : "viewBox,"
+	};
 	props[hasFallback ? "content" : "innerHTML"] = { value: stringifyFactoryIconContent(data.icon, options) };
 	if (data.fallback) props.fallback = data.fallback;
 	const types = addVueComponentTypes(data, options, assets, props);

package/lib/components/vue.js

@@ -1,14 +1,16 @@
 import { getComponentSizeValues } from "./helpers/content/size.js";
 import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
-import { getIconViewBox } from "../svg/viewbox/value.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 { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/ts.js";
-import { addVueComponentTypes } from "./helpers/vue/types.js";
 import { addSizeFunctionAsset } from "./helpers/functions/size.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 { addVueComponentTypes } from "./helpers/ts/vue.js";
 
 /**
 * Create Vue component code
@@ -26,13 +28,23 @@ function createVueComponent(data, options) {
 		...options,
 		styleInComponent
 	});
+	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 componentCode = [];
-	const sizeProps = getComponentSizeValues(options, data.viewBox);
 	const props = {};
 	if (!hasFallback) props.xmlns = "http://www.w3.org/2000/svg";
-	const viewBox = data.viewBox;
-	const isDynanicViewBox = !sizeProps && options.square && viewBox.width !== viewBox.height;
-	if (sizeProps) {
+	const getViewBox = (viewBox$1) => isStringViewBox ? `'${stringifyIconViewBox(viewBox$1)}'` : JSON.stringify(minifyViewBox(viewBox$1));
+	if (hasComputedViewbox) componentCode.push(`const baseViewBox = ${getViewBox(viewBox)};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `const viewBox = computed(() => props.square ? squareViewBox : baseViewBox);`);
+	else componentCode.push(`const viewBox = ${getViewBox(viewBox)};`);
+	const ratioValue = getViewBoxRatio(viewBox);
+	if (hasComputedRatio) componentCode.push(`const ratio = computed(() => props.square ? 1 : ${ratioValue});`);
+	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) {
@@ -48,7 +60,7 @@ function createVueComponent(data, options) {
 		};
 	} else {
 		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
-		componentCode.push(`const size = computed(() => ${getSizeProps}(props.width, props.height, viewBox${isDynanicViewBox ? ".value" : ""}));`);
+		componentCode.push(`const size = computed(() => ${getSizeProps}(props.width, props.height, ${hasComputedRatio ? "ratio.value" : ratioValue}));`);
 		vueNamedImports.add("computed");
 		props.width = {
 			type: "string",
@@ -62,10 +74,6 @@ function createVueComponent(data, options) {
 		};
 	}
 	if (options.square) props.square = { type: "boolean" };
-	const getViewBox = (viewBox$1) => hasFallback ? JSON.stringify(viewBox$1) : `'${getIconViewBox(viewBox$1)}'`;
-	const viewBoxValue = getViewBox(viewBox);
-	if (isDynanicViewBox) componentCode.unshift(`const baseViewBox = ${viewBoxValue};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `const viewBox = computed(() => props.square ? squareViewBox : baseViewBox);`);
-	else componentCode.unshift(`const viewBox = ${viewBoxValue};`);
 	props.viewBox = {
 		value: "viewBox",
 		template: ":viewBox=\"viewBox\""
@@ -77,9 +85,7 @@ function createVueComponent(data, options) {
 	};
 	const usedProps = getUsedFactoryProps(props);
 	if (usedProps.length) {
-		const tsCode = useTS ? `<{
-${stringifyFactoryPropTypes(props)}
-}>` : "";
+		const tsCode = useTS ? `<{\n${stringifyFactoryPropTypes(props)}\n}>` : "";
 		componentCode.unshift(`const props = defineProps${tsCode}(${JSON.stringify(usedProps)});\n`);
 	}
 	const template = `<template><${hasFallback ? "Icon" : "svg"} ${stringifyFactoryProps(props, ":{prop}=\"{value}\"")} /></template>`;

package/lib/svg/viewbox/value.d.ts

@@ -2,5 +2,5 @@ import { IconViewBox } from "./types.js";
 /**
  * Convert IconViewBox to string
  */
-declare function getIconViewBox(viewBox: IconViewBox): string;
-export { getIconViewBox };
+declare function stringifyIconViewBox(viewBox: IconViewBox): string;
+export { stringifyIconViewBox };

package/lib/svg/viewbox/value.js

@@ -1,8 +1,8 @@
 /**
 * Convert IconViewBox to string
 */
-function getIconViewBox(viewBox) {
+function stringifyIconViewBox(viewBox) {
 	return `${viewBox.left ?? 0} ${viewBox.top ?? 0} ${viewBox.width} ${viewBox.height}`;
 }
 
-export { getIconViewBox };
+export { stringifyIconViewBox };

package/package.json

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

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

@@ -1,27 +0,0 @@
-import { getGeneratedComponentTypesFilename } from "../filenames/types.js";
-import { stringifyFactoryPropTypes } from "../props/ts.js";
-
-/**
-* Add Vue component types
-*/
-function addVueComponentTypes(data, options, assets, props) {
-	const content = `import { DefineSetupFnComponent, PublicProps } from 'vue';
-
-interface IconProps {
-${stringifyFactoryPropTypes(props)}
-}
-
-declare const Component: DefineSetupFnComponent<IconProps, {}, {}, IconProps & {}, PublicProps>;
-
-export { type IconProps };
-export default Component;
-`;
-	const filename = getGeneratedComponentTypesFilename(data, content, options);
-	assets.push({
-		...filename,
-		content
-	});
-	return filename.filename;
-}
-
-export { addVueComponentTypes };