@cyberalien/svg-utils 0.1.5 → 0.1.6

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/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

@@ -15,13 +15,17 @@ import { makeSquareViewBox } from "../svg/viewbox/square.js";
 */
 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 = {};
@@ -79,12 +83,13 @@ ${stringifyFactoryPropTypes(props)}
 		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.6",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",