initial-logo 0.3.1 → 0.4.0

package/README.md

@@ -13,7 +13,7 @@ Generate JavaScript/TypeScript style logos (2 characters inside a square) easily
 - 🌈 **Gradients**: Support for gradient backgrounds and text.
 - 🔤 **Custom Fonts**: Easily load fonts from Google Fonts or other sources.
 - ⚡ **Lightweight**: Zero dependencies for the core logic.
-- 🖼️ **Multiple Formats**: Generate HTML Divs, SVG strings, or SVG Elements.
+- 🖼️ **Multiple Formats**: Generate HTML Divs, SVG strings, SVG Elements, or data URLs.
 
 ## Installation
 
@@ -26,7 +26,12 @@ npm install initial-logo
 ## Usage
 
 ```typescript
-import { generateLogo, generateSvg, generateSvgElement } from 'initial-logo';
+import {
+  generateLogo,
+  generateRawSvg,
+  generateSvgDataUrl,
+  generateSvgElement,
+} from 'initial-logo';
 
 // Generate HTML Div Element
 const logo = generateLogo({
@@ -38,12 +43,19 @@ const logo = generateLogo({
 document.body.appendChild(logo);
 
 // Generate SVG String
-const svgString = generateSvg({
+const svgString = generateRawSvg({
   text: 'JS',
   textColor: '#000000',
   backgroundColor: '#f7df1e',
 });
 
+// Generate SVG Data URL string (usable in img/src, CSS, etc.)
+const dataUrl = generateSvgDataUrl({
+  text: 'DN',
+  textColor: '#ffffff',
+  backgroundColor: '#000000',
+});
+
 // Generate SVG Element
 const svgElement = generateSvgElement({
   text: 'JS',
@@ -78,17 +90,25 @@ npx initial-logo -t JS -s 200 --textColor "#000000" --backgroundColor "#f7df1e"
 npx initial-logo -t GR --textColor "#ff0000" --textColor "#0000ff" --backgroundColor "#222222" --backgroundColor "#444444" -o gradient.svg
 ```
 
+Note: If `--output` is not specified, the CLI writes the generated SVG to `initial-logo.svg` in the current directory.
+
+```bash
+# Generate using default output filename
+npx initial-logo -t TS
+# This will create ./initial-logo.svg
+```
+
 ### Options
 
 | Option | Alias | Description | Default |
 |---|---|---|---|
 | `--text` | `-t` | Logo text (required) | - |
-| `--size` | `-s` | Logo size in pixels | `512` |
-| `--output` | `-o` | Output file path | `stdout` |
-| `--textColor` | | Text color (repeat for gradient) | `#ffffff` |
-| `--backgroundColor` | | Background color (repeat for gradient) | `#000000` |
-| `--fontSource` | | Font source URL | - |
-| `--fontSize` | | Font size | - |
+| `--size` | `-s` | Logo size in pixels | `100` |
+| `--output` | `-o` | Output file path | `initial-logo.svg` |
+| `--textColor` | `-T` | Text color (repeat for gradient) | `#ffffff` |
+| `--backgroundColor` | `-B` | Background color (repeat for gradient) | `#000000` |
+| `--fontSource` | `-f` | Font source URL | - |
+| `--fontSize` | `-F` | Font size | - |
 | `--help` | `-h` | Display help message | - |
 
 ## API
@@ -97,10 +117,14 @@ npx initial-logo -t GR --textColor "#ff0000" --textColor "#0000ff" --backgroundC
 
 Generates a logo as an HTML `div` element.
 
-### `generateSvg(options: LogoOptions): string`
+### `generateRawSvg(options: LogoOptions): string`
 
 Generates a logo as an SVG string.
 
+### `generateSvgDataUrl(options: LogoOptions): string`
+
+Generates a logo as a data URL string (`data:image/svg+xml;...`).
+
 ### `generateSvgElement(options: LogoOptions): SVGElement`
 
 Generates a logo as an SVG DOM element.
@@ -109,12 +133,13 @@ Generates a logo as an SVG DOM element.
 
 | Property | Type | Default | Description |
 |---|---|---|---|
-| `text` | `string` | (Required) | The 2 characters to display. |
+| `text` | `string` | (Required) | Exactly 2 characters to display. |
 | `size` | `number` | `100` | Size of the square in pixels. |
 | `textColor` | `string \| string[]` | `'#ffffff'` | Text color. Pass an array for gradient. |
 | `backgroundColor` | `string \| string[]` | `'#000000'` | Background color. Pass an array for gradient. |
 | `fontSource` | `string` | (Embedded JetBrains Mono) | URL to load the font from (WOFF2 format recommended). |
-| `fontSize` | `number` | `Math.round(size * 0.65)` | Font size in pixels. |
+| `fontFamily` | `string` | (Auto-generated) | Font family name to use. |
+| `fontSize` | `number` | `Math.round(size * 0.65)` for HTML, `Math.round(size * 0.525)` for SVG | Font size in pixels. |
 | `fontWeight` | `string \| number` | `'800'` | CSS font-weight. |
 | `lineHeight` | `string \| number` | `0.8` | CSS line-height. |
 

package/dist/{chunk-6FA2C7I6.js → chunk-77RHYW77.js}

@@ -17,6 +17,9 @@ function validateOptions(options) {
 }
 
 // src/svg.ts
+function escapeXml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
 function getSvgNode(options) {
   validateOptions(options);
   const id = Math.random().toString(16).substring(2, 10);
@@ -114,12 +117,12 @@ function getSvgNode(options) {
     children: [defs, bgRect, textNode]
   };
 }
-function buildSVG(svg) {
+function buildRawSVG(svg) {
   const { tag, attrs, children } = svg;
-  const attrString = attrs ? Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ") : "";
+  const attrString = attrs ? Object.entries(attrs).map(([key, value]) => `${key}="${escapeXml(String(value))}"`).join(" ") : "";
   const openingTag = attrString ? `<${tag} ${attrString}>` : `<${tag}>`;
   const childrenString = children ? children.map(
-    (child) => typeof child === "string" ? child : buildSVG(child)
+    (child) => typeof child === "string" ? escapeXml(child) : buildRawSVG(child)
   ).join("") : "";
   const closingTag = `</${tag}>`;
   return `${openingTag}${childrenString}${closingTag}`;
@@ -204,9 +207,15 @@ function generateLogo(options) {
   containerElement.appendChild(textElement);
   return containerElement;
 }
-function generateSvg(options) {
+function generateRawSvg(options) {
   const svg = getSvgNode(options);
-  return buildSVG(svg);
+  return buildRawSVG(svg);
+}
+function generateSvgDataUrl(options) {
+  const svgNode = getSvgNode(options);
+  const rawSvg = buildRawSVG(svgNode);
+  const encodedSvg = encodeURIComponent(rawSvg).replace(/'/g, "%27").replace(/"/g, "%22").replace(/\(/g, "%28").replace(/\)/g, "%29");
+  return `data:image/svg+xml;charset=UTF-8,${encodedSvg}`;
 }
 function generateSvgElement(options) {
   const svg = getSvgNode(options);
@@ -215,6 +224,7 @@ function generateSvgElement(options) {
 
 export {
   generateLogo,
-  generateSvg,
+  generateRawSvg,
+  generateSvgDataUrl,
   generateSvgElement
 };

package/dist/cli.cjs

@@ -24,6 +24,9 @@ function validateOptions(options2) {
 }
 
 // src/svg.ts
+function escapeXml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
 function getSvgNode(options2) {
   validateOptions(options2);
   const id = Math.random().toString(16).substring(2, 10);
@@ -121,21 +124,21 @@ function getSvgNode(options2) {
     children: [defs, bgRect, textNode]
   };
 }
-function buildSVG(svg) {
+function buildRawSVG(svg) {
   const { tag, attrs, children } = svg;
-  const attrString = attrs ? Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ") : "";
+  const attrString = attrs ? Object.entries(attrs).map(([key, value]) => `${key}="${escapeXml(String(value))}"`).join(" ") : "";
   const openingTag = attrString ? `<${tag} ${attrString}>` : `<${tag}>`;
   const childrenString = children ? children.map(
-    (child) => typeof child === "string" ? child : buildSVG(child)
+    (child) => typeof child === "string" ? escapeXml(child) : buildRawSVG(child)
   ).join("") : "";
   const closingTag = `</${tag}>`;
   return `${openingTag}${childrenString}${closingTag}`;
 }
 
 // src/core.ts
-function generateSvg(options2) {
+function generateRawSvg(options2) {
   const svg = getSvgNode(options2);
-  return buildSVG(svg);
+  return buildRawSVG(svg);
 }
 
 // src/cli.ts
@@ -156,17 +159,21 @@ var { values, positionals } = (0, import_node_util.parseArgs)({
     },
     textColor: {
       type: "string",
+      short: "T",
       multiple: true
     },
     backgroundColor: {
       type: "string",
+      short: "B",
       multiple: true
     },
     fontSource: {
-      type: "string"
+      type: "string",
+      short: "f"
     },
     fontSize: {
-      type: "string"
+      type: "string",
+      short: "F"
     },
     help: {
       type: "boolean",
@@ -181,12 +188,12 @@ Usage: initial-logo [options]
 
 Options:
   -t, --text <text>            Logo text (required)
-  -s, --size <number>          Logo size (default: 512)
-  -o, --output <path>          Output file path (default: stdout)
-  --textColor <color>          Text color (can be specified multiple times for gradient)
-  --backgroundColor <color>    Background color (can be specified multiple times for gradient)
-  --fontSource <url>           Font source URL
-  --fontSize <number>          Font size
+  -s, --size <number>          Logo size (default: 100)
+  -o, --output <path>          Output file path (default: initial-logo.svg)
+  -T, --textColor <color>          Text color (can be specified multiple times for gradient)
+  -B, --backgroundColor <color>    Background color (can be specified multiple times for gradient)
+  -f, --fontSource <url>           Font source URL
+  -F, --fontSize <number>          Font size
   -h, --help                   Display this help message
 `);
   process.exit(0);
@@ -207,13 +214,10 @@ var options = {
   fontSize: values.fontSize ? Number.parseInt(values.fontSize, 10) : void 0
 };
 try {
-  const svg = generateSvg(options);
-  if (values.output) {
-    (0, import_node_fs.writeFileSync)(values.output, svg);
-    console.log(`Generated SVG saved to ${values.output}`);
-  } else {
-    console.log(svg);
-  }
+  const rawSvg = generateRawSvg(options);
+  const outputPath = values.output ?? "initial-logo.svg";
+  (0, import_node_fs.writeFileSync)(outputPath, rawSvg);
+  console.log(`Generated SVG saved to ${outputPath}`);
 } catch (error) {
   console.error("Error generating SVG:", error);
   process.exit(1);

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
-  generateSvg
-} from "./chunk-6FA2C7I6.js";
+  generateRawSvg
+} from "./chunk-77RHYW77.js";
 
 // src/cli.ts
 import { writeFileSync } from "fs";
@@ -23,17 +23,21 @@ var { values, positionals } = parseArgs({
     },
     textColor: {
       type: "string",
+      short: "T",
       multiple: true
     },
     backgroundColor: {
       type: "string",
+      short: "B",
       multiple: true
     },
     fontSource: {
-      type: "string"
+      type: "string",
+      short: "f"
     },
     fontSize: {
-      type: "string"
+      type: "string",
+      short: "F"
     },
     help: {
       type: "boolean",
@@ -48,12 +52,12 @@ Usage: initial-logo [options]
 
 Options:
   -t, --text <text>            Logo text (required)
-  -s, --size <number>          Logo size (default: 512)
-  -o, --output <path>          Output file path (default: stdout)
-  --textColor <color>          Text color (can be specified multiple times for gradient)
-  --backgroundColor <color>    Background color (can be specified multiple times for gradient)
-  --fontSource <url>           Font source URL
-  --fontSize <number>          Font size
+  -s, --size <number>          Logo size (default: 100)
+  -o, --output <path>          Output file path (default: initial-logo.svg)
+  -T, --textColor <color>          Text color (can be specified multiple times for gradient)
+  -B, --backgroundColor <color>    Background color (can be specified multiple times for gradient)
+  -f, --fontSource <url>           Font source URL
+  -F, --fontSize <number>          Font size
   -h, --help                   Display this help message
 `);
   process.exit(0);
@@ -74,13 +78,10 @@ var options = {
   fontSize: values.fontSize ? Number.parseInt(values.fontSize, 10) : void 0
 };
 try {
-  const svg = generateSvg(options);
-  if (values.output) {
-    writeFileSync(values.output, svg);
-    console.log(`Generated SVG saved to ${values.output}`);
-  } else {
-    console.log(svg);
-  }
+  const rawSvg = generateRawSvg(options);
+  const outputPath = values.output ?? "initial-logo.svg";
+  writeFileSync(outputPath, rawSvg);
+  console.log(`Generated SVG saved to ${outputPath}`);
 } catch (error) {
   console.error("Error generating SVG:", error);
   process.exit(1);

package/dist/index.cjs

@@ -21,7 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   generateLogo: () => generateLogo,
-  generateSvg: () => generateSvg,
+  generateRawSvg: () => generateRawSvg,
+  generateSvgDataUrl: () => generateSvgDataUrl,
   generateSvgElement: () => generateSvgElement
 });
 module.exports = __toCommonJS(index_exports);
@@ -45,6 +46,9 @@ function validateOptions(options) {
 }
 
 // src/svg.ts
+function escapeXml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
 function getSvgNode(options) {
   validateOptions(options);
   const id = Math.random().toString(16).substring(2, 10);
@@ -142,12 +146,12 @@ function getSvgNode(options) {
     children: [defs, bgRect, textNode]
   };
 }
-function buildSVG(svg) {
+function buildRawSVG(svg) {
   const { tag, attrs, children } = svg;
-  const attrString = attrs ? Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ") : "";
+  const attrString = attrs ? Object.entries(attrs).map(([key, value]) => `${key}="${escapeXml(String(value))}"`).join(" ") : "";
   const openingTag = attrString ? `<${tag} ${attrString}>` : `<${tag}>`;
   const childrenString = children ? children.map(
-    (child) => typeof child === "string" ? child : buildSVG(child)
+    (child) => typeof child === "string" ? escapeXml(child) : buildRawSVG(child)
   ).join("") : "";
   const closingTag = `</${tag}>`;
   return `${openingTag}${childrenString}${closingTag}`;
@@ -232,9 +236,15 @@ function generateLogo(options) {
   containerElement.appendChild(textElement);
   return containerElement;
 }
-function generateSvg(options) {
+function generateRawSvg(options) {
   const svg = getSvgNode(options);
-  return buildSVG(svg);
+  return buildRawSVG(svg);
+}
+function generateSvgDataUrl(options) {
+  const svgNode = getSvgNode(options);
+  const rawSvg = buildRawSVG(svgNode);
+  const encodedSvg = encodeURIComponent(rawSvg).replace(/'/g, "%27").replace(/"/g, "%22").replace(/\(/g, "%28").replace(/\)/g, "%29");
+  return `data:image/svg+xml;charset=UTF-8,${encodedSvg}`;
 }
 function generateSvgElement(options) {
   const svg = getSvgNode(options);
@@ -243,6 +253,7 @@ function generateSvgElement(options) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   generateLogo,
-  generateSvg,
+  generateRawSvg,
+  generateSvgDataUrl,
   generateSvgElement
 });

package/dist/index.d.cts

@@ -101,7 +101,8 @@ interface SVGNode<T extends SVGTagName = SVGTagName> {
 }
 
 declare function generateLogo(options: LogoOptions): HTMLDivElement;
-declare function generateSvg(options: LogoOptions): string;
+declare function generateRawSvg(options: LogoOptions): string;
+declare function generateSvgDataUrl(options: LogoOptions): string;
 declare function generateSvgElement(options: LogoOptions): SVGElement;
 
-export { type LogoOptions, type NumberProp, type SVGBaseAttrs, type SVGCoreAttrs, type SVGGradientBaseAttrs, type SVGLinearGradientAttrs, type SVGNode, type SVGPresentationAttrs, type SVGRadialGradientAttrs, type SVGRectAttrs, type SVGSVGAttrs, type SVGStopAttrs, type SVGTagMap, type SVGTagName, type SVGTextAttrs, generateLogo, generateSvg, generateSvgElement };
+export { type LogoOptions, type NumberProp, type SVGBaseAttrs, type SVGCoreAttrs, type SVGGradientBaseAttrs, type SVGLinearGradientAttrs, type SVGNode, type SVGPresentationAttrs, type SVGRadialGradientAttrs, type SVGRectAttrs, type SVGSVGAttrs, type SVGStopAttrs, type SVGTagMap, type SVGTagName, type SVGTextAttrs, generateLogo, generateRawSvg, generateSvgDataUrl, generateSvgElement };

package/dist/index.d.ts

@@ -101,7 +101,8 @@ interface SVGNode<T extends SVGTagName = SVGTagName> {
 }
 
 declare function generateLogo(options: LogoOptions): HTMLDivElement;
-declare function generateSvg(options: LogoOptions): string;
+declare function generateRawSvg(options: LogoOptions): string;
+declare function generateSvgDataUrl(options: LogoOptions): string;
 declare function generateSvgElement(options: LogoOptions): SVGElement;
 
-export { type LogoOptions, type NumberProp, type SVGBaseAttrs, type SVGCoreAttrs, type SVGGradientBaseAttrs, type SVGLinearGradientAttrs, type SVGNode, type SVGPresentationAttrs, type SVGRadialGradientAttrs, type SVGRectAttrs, type SVGSVGAttrs, type SVGStopAttrs, type SVGTagMap, type SVGTagName, type SVGTextAttrs, generateLogo, generateSvg, generateSvgElement };
+export { type LogoOptions, type NumberProp, type SVGBaseAttrs, type SVGCoreAttrs, type SVGGradientBaseAttrs, type SVGLinearGradientAttrs, type SVGNode, type SVGPresentationAttrs, type SVGRadialGradientAttrs, type SVGRectAttrs, type SVGSVGAttrs, type SVGStopAttrs, type SVGTagMap, type SVGTagName, type SVGTextAttrs, generateLogo, generateRawSvg, generateSvgDataUrl, generateSvgElement };

package/dist/index.js

@@ -1,10 +1,12 @@
 import {
   generateLogo,
-  generateSvg,
+  generateRawSvg,
+  generateSvgDataUrl,
   generateSvgElement
-} from "./chunk-6FA2C7I6.js";
+} from "./chunk-77RHYW77.js";
 export {
   generateLogo,
-  generateSvg,
+  generateRawSvg,
+  generateSvgDataUrl,
   generateSvgElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "initial-logo",
-	"version": "0.3.1",
+	"version": "0.4.0",
 	"description": "Generate JavaScript/TypeScript style logo",
 	"keywords": [
 		"logo",
@@ -47,7 +47,7 @@
 		"format": "biome format --write",
 		"lint": "biome lint --write",
 		"check": "biome check --write",
-		"prepublishOnly": "bun run build"
+		"prepare": "bun run build"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.10",