@cyberalien/svg-utils 0.1.5 → 0.1.7

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/css/generate.d.ts

@@ -2,10 +2,13 @@ import { GeneratedAssetFile } from "../../types/component.js";
 import { ComponentFactorySource } from "../../types/source.js";
 import { ComponentFactoryOptions } from "../../types/options.js";
 import { FactoryComponentImports } from "../imports/types.js";
+interface Options extends Pick<ComponentFactoryOptions, 'cssMode' | 'cssPath' | 'doubleDirsForCSS' | 'mergeCSS'> {
+  styleInComponent?: boolean;
+}
 /**
  * Generate CSS files for component
  *
  * Adds imports to imports object, adds assets
  */
-declare function generateCSSFilesForComponent(content: ComponentFactorySource, imports: FactoryComponentImports, assets: GeneratedAssetFile[], options: Pick<ComponentFactoryOptions, 'cssMode' | 'cssPath' | 'doubleDirsForCSS' | 'mergeCSS'>): void;
+declare function generateCSSFilesForComponent(content: ComponentFactorySource, imports: FactoryComponentImports, assets: GeneratedAssetFile[], options: Options): string | undefined;
 export { generateCSSFilesForComponent };

package/lib/components/helpers/css/generate.js

@@ -11,7 +11,8 @@ function generateCSSFilesForComponent(content, imports, assets, options) {
 	const { classes, keyframes } = content;
 	if (!classes) return;
 	const isModule = options.cssMode === "module";
-	const mergeCSS = options.mergeCSS ?? false;
+	const styleInComponent = (!isModule && options.styleInComponent) ?? false;
+	const mergeCSS = (styleInComponent || options.mergeCSS) ?? false;
 	const embedAnimations = isModule && !mergeCSS;
 	const mergedContent = [];
 	for (const className in classes) {
@@ -51,12 +52,16 @@ function generateCSSFilesForComponent(content, imports, assets, options) {
 		else imports.css.add(filename.import);
 	}
 	if (mergeCSS && mergedContent.length) {
-		assets.push({
-			...mergeCSS,
-			content: mergedContent.join("\n\n")
-		});
-		if (isModule) imports.modules[mergeCSS.import] = "css";
-		else imports.css.add(mergeCSS.import);
+		const content$1 = mergedContent.join("\n");
+		if (typeof mergeCSS == "object") {
+			assets.push({
+				...mergeCSS,
+				content: content$1
+			});
+			if (isModule) imports.modules[mergeCSS.import] = "css";
+			else imports.css.add(mergeCSS.import);
+		}
+		return styleInComponent ? content$1 : void 0;
 	}
 }
 

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/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,97 @@
+import { getComponentSizeValues } from "./helpers/content/size.js";
+import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
+import { getIconViewBox } 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";
+
+/**
+* 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
+	});
+	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;
+	const viewBoxPropValue = `viewBox${isDynanicViewBox ? "Computed" : ""}`;
+	if (sizeProps) {
+		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, ${viewBoxPropValue}));`);
+		props.width = {
+			type: "string",
+			value: "width",
+			template: "{...size}"
+		};
+		props.height = {
+			type: "string",
+			value: "height",
+			template: ""
+		};
+	}
+	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))};`, `let ${viewBoxPropValue} = $derived(square ? squareViewBox : baseViewBox);`);
+	else componentCode.unshift(`const viewBox = ${viewBoxValue};`);
+	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

@@ -4,11 +4,11 @@ import { getIconViewBox } 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 { addVueComponentTypes } from "./helpers/ts/vue.js";
+import { stringifyFactoryPropsAsJSON } from "./helpers/props/object.js";
 
 /**
 * Create functional Vue component code

package/lib/components/vue.d.ts

@@ -3,6 +3,7 @@ import { FactoryIconData } from "./types/data.js";
 import { ComponentFactoryOptions } from "./types/options.js";
 interface VueOptions extends ComponentFactoryOptions {
   ts?: boolean;
+  styles?: boolean;
 }
 /**
  * Create Vue component code

package/lib/components/vue.js

@@ -5,23 +5,27 @@ 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 { addVueComponentTypes } from "./helpers/ts/vue.js";
 
 /**
 * Create Vue component code
 */
 function createVueComponent(data, options) {
 	const useTS = options.ts ?? false;
+	const styleInComponent = options.styles ?? false;
 	const assets = [];
 	const imports = createFactoryImports();
 	const hasFallback = !!data.fallback;
 	if (hasFallback) imports.named["@iconify/css-vue"] = new Set(["Icon"]);
 	const vueNamedImports = /* @__PURE__ */ new Set();
 	imports.named["vue"] = vueNamedImports;
-	generateCSSFilesForComponent(data.icon, imports, assets, options);
+	const styleContent = generateCSSFilesForComponent(data.icon, imports, assets, {
+		...options,
+		styleInComponent
+	});
 	const componentCode = [];
 	const sizeProps = getComponentSizeValues(options, data.viewBox);
 	const props = {};
@@ -73,18 +77,17 @@ 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>`;
-	const content = `<script setup${useTS ? " lang=\"ts\"" : ""}>
+	let content = `<script setup${useTS ? " lang=\"ts\"" : ""}>
 ${stringifyFactoryImports(imports)}
 ${componentCode.join("\n")}
 <\/script>
 ${template}
 `;
+	if (styleContent) content += `<style>\n${styleContent}\n</style>\n`;
 	const types = addVueComponentTypes(data, options, assets, props);
 	return {
 		assets,

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.5",
+  "version": "0.1.7",
   "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 };