@cyberalien/svg-utils 0.0.16 → 0.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/{svg/css/css/class.d.ts → css/hash.d.ts} +1 -1
- package/lib/{svg/css/css/class.js → css/hash.js} +2 -2
- package/lib/{svg/css/css → css}/stringify.d.ts +1 -1
- package/lib/css/types.d.ts +5 -0
- package/lib/helpers/misc/strings.d.ts +17 -0
- package/lib/helpers/misc/strings.js +29 -0
- package/lib/index.d.ts +10 -10
- package/lib/index.js +9 -9
- package/lib/svg/viewbox/types.d.ts +11 -0
- package/lib/svg/viewbox/types.js +1 -0
- package/lib/svg/viewbox/value.d.ts +6 -0
- package/lib/svg/viewbox/value.js +8 -0
- package/lib/svg-css/convert/content.d.ts +10 -0
- package/lib/svg-css/convert/content.js +22 -0
- package/lib/{svg/css → svg-css}/convert/root.d.ts +2 -2
- package/lib/{svg/css → svg-css}/convert/root.js +3 -3
- package/lib/svg-css/factory/export/fs.d.ts +6 -0
- package/lib/svg-css/factory/export/fs.js +20 -0
- package/lib/svg-css/factory/helpers/add-css.d.ts +8 -0
- package/lib/svg-css/factory/helpers/add-css.js +32 -0
- package/lib/svg-css/factory/helpers/component-name.d.ts +9 -0
- package/lib/svg-css/factory/helpers/component-name.js +17 -0
- package/lib/svg-css/factory/helpers/component-path.d.ts +5 -0
- package/lib/svg-css/factory/helpers/component-path.js +9 -0
- package/lib/svg-css/factory/helpers/css-filename.d.ts +5 -0
- package/lib/svg-css/factory/helpers/css-filename.js +10 -0
- package/lib/svg-css/factory/helpers/exports.d.ts +6 -0
- package/lib/svg-css/factory/helpers/exports.js +10 -0
- package/lib/svg-css/factory/helpers/merge.d.ts +6 -0
- package/lib/svg-css/factory/helpers/merge.js +19 -0
- package/lib/svg-css/factory/helpers/options.d.ts +6 -0
- package/lib/svg-css/factory/helpers/options.js +12 -0
- package/lib/svg-css/factory/helpers/prefix.d.ts +6 -0
- package/lib/svg-css/factory/helpers/prefix.js +8 -0
- package/lib/svg-css/factory/iconify/vue.d.ts +6 -0
- package/lib/svg-css/factory/iconify/vue.js +72 -0
- package/lib/svg-css/factory/types.d.ts +48 -0
- package/lib/svg-css/factory/types.js +1 -0
- package/lib/{svg/css → svg-css}/props/props.d.ts +1 -1
- package/lib/{svg/css → svg-css}/props/props.js +1 -1
- package/lib/{svg/css → svg-css}/types.d.ts +3 -6
- package/lib/svg-css/types.js +1 -0
- package/package.json +1 -1
- package/lib/svg/css/convert/content.d.ts +0 -10
- package/lib/svg/css/convert/content.js +0 -27
- /package/lib/{svg/css/css → classname}/const.d.ts +0 -0
- /package/lib/{svg/css/css → classname}/const.js +0 -0
- /package/lib/{svg/css/css → classname}/toggle.d.ts +0 -0
- /package/lib/{svg/css/css → classname}/toggle.js +0 -0
- /package/lib/{svg/css/css → css}/stringify.js +0 -0
- /package/lib/{svg/css → css}/types.js +0 -0
- /package/lib/{svg/css → svg-css}/props/prop.d.ts +0 -0
- /package/lib/{svg/css → svg-css}/props/prop.js +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { sortObject } from "
|
|
2
|
-
import { getUniqueHash } from "
|
|
1
|
+
import { sortObject } from "../helpers/misc/sort-object.js";
|
|
2
|
+
import { getUniqueHash } from "../helpers/hash/unique.js";
|
|
3
3
|
|
|
4
4
|
const length = 6;
|
|
5
5
|
/**
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert string to camelCase
|
|
3
|
+
*/
|
|
4
|
+
declare function camelize(str: string): string;
|
|
5
|
+
/**
|
|
6
|
+
* Convert string to PascaleCase
|
|
7
|
+
*/
|
|
8
|
+
declare function pascalize(str: string): string;
|
|
9
|
+
/**
|
|
10
|
+
* Convert camelCase string to kebab-case
|
|
11
|
+
*/
|
|
12
|
+
declare function camelToKebab(key: string): string;
|
|
13
|
+
/**
|
|
14
|
+
* Convert camelCase string to snake-case
|
|
15
|
+
*/
|
|
16
|
+
declare function snakelize(str: string): string;
|
|
17
|
+
export { camelToKebab, camelize, pascalize, snakelize };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert string to camelCase
|
|
3
|
+
*/
|
|
4
|
+
function camelize(str) {
|
|
5
|
+
return str.replace(/-([a-z0-9])/g, (g) => g[1].toUpperCase());
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Convert string to PascaleCase
|
|
9
|
+
*/
|
|
10
|
+
function pascalize(str) {
|
|
11
|
+
const camel = camelize(str);
|
|
12
|
+
return camel.slice(0, 1).toUpperCase() + camel.slice(1);
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Convert camelCase string to kebab-case
|
|
16
|
+
*/
|
|
17
|
+
function camelToKebab(key) {
|
|
18
|
+
const result = key.replace(/:/g, "-").replace(/([A-Z])/g, " $1").trim();
|
|
19
|
+
return result.split(/\s+/g).join("-").toLowerCase();
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Convert camelCase string to snake-case
|
|
23
|
+
*/
|
|
24
|
+
function snakelize(str) {
|
|
25
|
+
const kebab = camelToKebab(str);
|
|
26
|
+
return kebab.replace(/-/g, "_");
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export { camelToKebab, camelize, pascalize, snakelize };
|
package/lib/index.d.ts
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import { ClassProp, classProps, defaultClassProp } from "./classname/const.js";
|
|
2
|
+
import { splitClassName, toggleClassName } from "./classname/toggle.js";
|
|
3
|
+
import { createCSSClassName } from "./css/hash.js";
|
|
4
|
+
import { stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
|
|
1
5
|
import { hashString } from "./helpers/hash/hash.js";
|
|
2
6
|
import { hashToString } from "./helpers/hash/stringify.js";
|
|
3
7
|
import { UniqueHashOptions } from "./helpers/hash/types.js";
|
|
@@ -15,13 +19,9 @@ import { removeDuplicateIDs } from "./svg/ids/duplicate.js";
|
|
|
15
19
|
import { removeUnusedIDs } from "./svg/ids/unused.js";
|
|
16
20
|
import { changeSVGIDs } from "./svg/ids/change.js";
|
|
17
21
|
import { createUniqueIDs } from "./svg/ids/unique.js";
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
|
|
24
|
-
import { extractSVGTagPropertiesForCSS } from "./svg/css/props/props.js";
|
|
25
|
-
import { convertSVGRootToCSS } from "./svg/css/convert/root.js";
|
|
26
|
-
import { convertSVGContentToCSS } from "./svg/css/convert/content.js";
|
|
27
|
-
export { CSSRules, ChangeIDResult, ClassProp, ConvertedSVGContent, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, SVGConvertedToCSSProperties, SVGPropertyType, StringifyXMLOptions, UniqueHashOptions, changeIDInString, changeSVGIDs, classProps, cloneObject, compareSets, compareValues, convertSVGContentToCSS, convertSVGPropertyToCSS, convertSVGRootToCSS, createCSSClassName, createUniqueIDs, defaultClassProp, extractSVGTagPropertiesForCSS, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSRules, stringifyCSSSelector, stringifyXMLContent, toggleClassName };
|
|
22
|
+
import { ConvertedSVGContent, SVGConvertedToCSSProperties, SVGPropertyType } from "./svg-css/types.js";
|
|
23
|
+
import { convertSVGPropertyToCSS } from "./svg-css/props/prop.js";
|
|
24
|
+
import { extractSVGTagPropertiesForCSS } from "./svg-css/props/props.js";
|
|
25
|
+
import { convertSVGRootToCSS } from "./svg-css/convert/root.js";
|
|
26
|
+
import { convertSVGContentToCSSRules } from "./svg-css/convert/content.js";
|
|
27
|
+
export { ChangeIDResult, ClassProp, ConvertedSVGContent, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, SVGConvertedToCSSProperties, SVGPropertyType, StringifyXMLOptions, UniqueHashOptions, changeIDInString, changeSVGIDs, classProps, cloneObject, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGPropertyToCSS, convertSVGRootToCSS, createCSSClassName, createUniqueIDs, defaultClassProp, extractSVGTagPropertiesForCSS, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSRules, stringifyCSSSelector, stringifyXMLContent, toggleClassName };
|
package/lib/index.js
CHANGED
|
@@ -7,18 +7,18 @@ import { getUniqueHash } from "./helpers/hash/unique.js";
|
|
|
7
7
|
import { iterateXMLContent } from "./xml/iterate.js";
|
|
8
8
|
import { parseXMLContent } from "./xml/parse.js";
|
|
9
9
|
import { stringifyXMLContent } from "./xml/stringify.js";
|
|
10
|
+
import { createCSSClassName } from "./css/hash.js";
|
|
11
|
+
import { stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
|
|
12
|
+
import { classProps, defaultClassProp } from "./classname/const.js";
|
|
13
|
+
import { splitClassName, toggleClassName } from "./classname/toggle.js";
|
|
10
14
|
import { changeIDInString } from "./svg/ids/string.js";
|
|
11
15
|
import { removeDuplicateIDs } from "./svg/ids/duplicate.js";
|
|
12
16
|
import { removeUnusedIDs } from "./svg/ids/unused.js";
|
|
13
17
|
import { changeSVGIDs } from "./svg/ids/change.js";
|
|
14
18
|
import { createUniqueIDs } from "./svg/ids/unique.js";
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import { convertSVGPropertyToCSS } from "./svg/css/props/prop.js";
|
|
20
|
-
import { extractSVGTagPropertiesForCSS } from "./svg/css/props/props.js";
|
|
21
|
-
import { convertSVGRootToCSS } from "./svg/css/convert/root.js";
|
|
22
|
-
import { convertSVGContentToCSS } from "./svg/css/convert/content.js";
|
|
19
|
+
import { convertSVGPropertyToCSS } from "./svg-css/props/prop.js";
|
|
20
|
+
import { extractSVGTagPropertiesForCSS } from "./svg-css/props/props.js";
|
|
21
|
+
import { convertSVGRootToCSS } from "./svg-css/convert/root.js";
|
|
22
|
+
import { convertSVGContentToCSSRules } from "./svg-css/convert/content.js";
|
|
23
23
|
|
|
24
|
-
export { changeIDInString, changeSVGIDs, classProps, cloneObject, compareSets, compareValues,
|
|
24
|
+
export { changeIDInString, changeSVGIDs, classProps, cloneObject, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGPropertyToCSS, convertSVGRootToCSS, createCSSClassName, createUniqueIDs, defaultClassProp, extractSVGTagPropertiesForCSS, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSRules, stringifyCSSSelector, stringifyXMLContent, toggleClassName };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { StringifyXMLOptions } from "../../xml/types.js";
|
|
2
|
+
import { ConvertedSVGContent } from "../types.js";
|
|
3
|
+
interface Options extends StringifyXMLOptions {
|
|
4
|
+
classNamePrefix?: string;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Convert SVG content string to SVG+CSS
|
|
8
|
+
*/
|
|
9
|
+
declare function convertSVGContentToCSSRules(content: string, options?: Options): ConvertedSVGContent;
|
|
10
|
+
export { convertSVGContentToCSSRules };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { parseXMLContent } from "../../xml/parse.js";
|
|
2
|
+
import { stringifyXMLContent } from "../../xml/stringify.js";
|
|
3
|
+
import { convertSVGRootToCSS } from "./root.js";
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Convert SVG content string to SVG+CSS
|
|
7
|
+
*/
|
|
8
|
+
function convertSVGContentToCSSRules(content, options) {
|
|
9
|
+
const root = parseXMLContent(content);
|
|
10
|
+
if (!root) return { content };
|
|
11
|
+
const classes = convertSVGRootToCSS(root, options?.classNamePrefix);
|
|
12
|
+
if (classes) {
|
|
13
|
+
const newContent = stringifyXMLContent(root, options);
|
|
14
|
+
if (newContent) return {
|
|
15
|
+
content: newContent,
|
|
16
|
+
classes
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
return { content };
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export { convertSVGContentToCSSRules };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { iterateXMLContent } from "
|
|
2
|
-
import { createCSSClassName } from "
|
|
3
|
-
import { toggleClassName } from "
|
|
1
|
+
import { iterateXMLContent } from "../../xml/iterate.js";
|
|
2
|
+
import { createCSSClassName } from "../../css/hash.js";
|
|
3
|
+
import { toggleClassName } from "../../classname/toggle.js";
|
|
4
4
|
import { extractSVGTagPropertiesForCSS } from "../props/props.js";
|
|
5
5
|
|
|
6
6
|
/**
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { mkdir, writeFile } from "node:fs/promises";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Save exported files to filesystem
|
|
5
|
+
*/
|
|
6
|
+
async function saveExportedFilesToFS(files, dir) {
|
|
7
|
+
let saved = 0;
|
|
8
|
+
for (const { filename, content } of files) {
|
|
9
|
+
const filePath = `${dir}/${filename}`;
|
|
10
|
+
const dirPath = filePath.substring(0, filePath.lastIndexOf("/"));
|
|
11
|
+
try {
|
|
12
|
+
await mkdir(dirPath, { recursive: true });
|
|
13
|
+
} catch {}
|
|
14
|
+
await writeFile(filePath, content, "utf8");
|
|
15
|
+
saved++;
|
|
16
|
+
}
|
|
17
|
+
return saved;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export { saveExportedFilesToFS };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ExportedComponentFile, SVGPreParsedContent } from "../types.js";
|
|
2
|
+
/**
|
|
3
|
+
* Add CSS imports and files to component
|
|
4
|
+
*
|
|
5
|
+
* Returns true if CSS was added
|
|
6
|
+
*/
|
|
7
|
+
declare function addCSSToComponent(parsedContent: SVGPreParsedContent, addImportsTo: string[], files: ExportedComponentFile[], rootPath: string, classNamePrefix: string): boolean;
|
|
8
|
+
export { addCSSToComponent };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { stringifyCSSSelector } from "../../../css/stringify.js";
|
|
2
|
+
import { getCSSFilename } from "./css-filename.js";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Add CSS imports and files to component
|
|
6
|
+
*
|
|
7
|
+
* Returns true if CSS was added
|
|
8
|
+
*/
|
|
9
|
+
function addCSSToComponent(parsedContent, addImportsTo, files, rootPath, classNamePrefix) {
|
|
10
|
+
let hasCSS = false;
|
|
11
|
+
if (parsedContent.css) for (const className in parsedContent.css) {
|
|
12
|
+
hasCSS = true;
|
|
13
|
+
const filename = getCSSFilename(className, classNamePrefix);
|
|
14
|
+
addImportsTo.push(`import '${rootPath}${filename}';`);
|
|
15
|
+
files.push({
|
|
16
|
+
filename,
|
|
17
|
+
content: parsedContent.css[className]
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
if (parsedContent.classes) for (const className in parsedContent.classes) {
|
|
21
|
+
hasCSS = true;
|
|
22
|
+
const filename = getCSSFilename(className, classNamePrefix);
|
|
23
|
+
addImportsTo.push(`import '${rootPath}${filename}';`);
|
|
24
|
+
files.push({
|
|
25
|
+
filename,
|
|
26
|
+
content: stringifyCSSSelector(`.${className}`, parsedContent.classes[className])
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
return hasCSS;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export { addCSSToComponent };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
interface Options {
|
|
2
|
+
pascalCase?: boolean;
|
|
3
|
+
ucPrefix?: boolean;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Get icon component name in camelCase or PascalCase if `pascalCase` is true
|
|
7
|
+
*/
|
|
8
|
+
declare function camelCaseIconComponentName(name: string, options: Options, prefix?: string): string;
|
|
9
|
+
export { camelCaseIconComponentName };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { camelize, pascalize } from "../../../helpers/misc/strings.js";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Get icon component name in camelCase or PascalCase if `pascalCase` is true
|
|
5
|
+
*/
|
|
6
|
+
function camelCaseIconComponentName(name, options, prefix) {
|
|
7
|
+
name = `${name}-icon`;
|
|
8
|
+
const { pascalCase, ucPrefix } = options;
|
|
9
|
+
if (prefix) {
|
|
10
|
+
if (!pascalCase) return camelize(`${prefix}-${name}`);
|
|
11
|
+
if (pascalCase && (ucPrefix || ucPrefix === void 0 && prefix.length < 5)) return prefix.toUpperCase() + pascalize(name);
|
|
12
|
+
name = `${prefix}-${name}`;
|
|
13
|
+
}
|
|
14
|
+
return pascalCase ? pascalize(name) : camelize(name);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export { camelCaseIconComponentName };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Get filename for CSS file
|
|
3
|
+
*/
|
|
4
|
+
function getCSSFilename(className, classNamePrefix) {
|
|
5
|
+
const matchLength = className.startsWith(classNamePrefix) ? classNamePrefix.length : 0;
|
|
6
|
+
const firstPart = className.slice(0, matchLength + 1);
|
|
7
|
+
return `css/${firstPart}/${className}.css`;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export { getCSSFilename };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ExportedComponent } from "../types.js";
|
|
2
|
+
/**
|
|
3
|
+
* Add exports for main files to object
|
|
4
|
+
*/
|
|
5
|
+
declare function createExportsForMainFiles(data: ExportedComponent[], result?: Record<string, string>): Record<string, string>;
|
|
6
|
+
export { createExportsForMainFiles };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Add exports for main files to object
|
|
3
|
+
*/
|
|
4
|
+
function createExportsForMainFiles(data, result) {
|
|
5
|
+
result = result || Object.create(null);
|
|
6
|
+
for (const { prefix, name, main } of data) result[`./${prefix ? `${prefix}/${name}` : name}`] = `./${main.filename}`;
|
|
7
|
+
return result;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export { createExportsForMainFiles };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Merge all files
|
|
3
|
+
*/
|
|
4
|
+
function mergeExportedComponentFiles(data) {
|
|
5
|
+
const files = [];
|
|
6
|
+
const added = /* @__PURE__ */ new Set();
|
|
7
|
+
function add(file) {
|
|
8
|
+
if (added.has(file.filename)) return;
|
|
9
|
+
added.add(file.filename);
|
|
10
|
+
files.push(file);
|
|
11
|
+
}
|
|
12
|
+
for (const item of data) {
|
|
13
|
+
add(item.main);
|
|
14
|
+
item.shared.forEach(add);
|
|
15
|
+
}
|
|
16
|
+
return files;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { mergeExportedComponentFiles };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ComponentFactoryIconData, ComponentFactoryOptions } from "../types.js";
|
|
2
|
+
/**
|
|
3
|
+
* Get default options for component factory
|
|
4
|
+
*/
|
|
5
|
+
declare function getDefaultComponentFactoryOptions(options: Partial<ComponentFactoryOptions>, data: ComponentFactoryIconData): ComponentFactoryOptions;
|
|
6
|
+
export { getDefaultComponentFactoryOptions };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Get default options for component factory
|
|
3
|
+
*/
|
|
4
|
+
function getDefaultComponentFactoryOptions(options, data) {
|
|
5
|
+
return {
|
|
6
|
+
addPrefixToFilenames: !!data.prefix,
|
|
7
|
+
classNamePrefix: "",
|
|
8
|
+
...options
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { getDefaultComponentFactoryOptions };
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { convertSVGContentToCSSRules } from "../../convert/content.js";
|
|
2
|
+
import { getIconViewBox } from "../../../svg/viewbox/value.js";
|
|
3
|
+
import { iconComponentFilenamePath } from "../helpers/component-path.js";
|
|
4
|
+
import { getDefaultComponentFactoryOptions } from "../helpers/options.js";
|
|
5
|
+
import { addCSSToComponent } from "../helpers/add-css.js";
|
|
6
|
+
import { removePrefixIfNotUsed } from "../helpers/prefix.js";
|
|
7
|
+
import { camelCaseIconComponentName } from "../helpers/component-name.js";
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Create Vue component with Iconify icon
|
|
11
|
+
*/
|
|
12
|
+
const createIconifyVueComponent = (data, options = {}) => {
|
|
13
|
+
const { name, content, viewBox } = data;
|
|
14
|
+
const fullOptions = getDefaultComponentFactoryOptions(options, data);
|
|
15
|
+
const prefix = removePrefixIfNotUsed(fullOptions, data.prefix);
|
|
16
|
+
const pathParts = iconComponentFilenamePath(name, prefix);
|
|
17
|
+
const rootPath = "../".repeat(pathParts.length);
|
|
18
|
+
const viewBoxValue = getIconViewBox(viewBox);
|
|
19
|
+
const viewBoxSource = `viewbox/${viewBoxValue.replaceAll(" ", "-")}.js`;
|
|
20
|
+
const shared = [{
|
|
21
|
+
filename: "misc/setup.js",
|
|
22
|
+
content: "const iconProps = { props: ['width', 'height'] }; export default iconProps;"
|
|
23
|
+
}, {
|
|
24
|
+
filename: viewBoxSource,
|
|
25
|
+
content: `const iconViewBox = ${JSON.stringify(viewBox)}; export default iconViewBox;`
|
|
26
|
+
}];
|
|
27
|
+
const parsedContent = typeof content === "string" ? convertSVGContentToCSSRules(content, fullOptions) : content;
|
|
28
|
+
const vueComponentLines = [
|
|
29
|
+
"import { defineComponent, h } from 'vue';",
|
|
30
|
+
"import { Icon } from '@iconify/css-vue';",
|
|
31
|
+
`import iconProps from '${rootPath}misc/setup.js';`,
|
|
32
|
+
`import viewBox from '${rootPath}${viewBoxSource}';`
|
|
33
|
+
];
|
|
34
|
+
const hasCSS = addCSSToComponent(parsedContent, vueComponentLines, shared, rootPath, fullOptions.classNamePrefix);
|
|
35
|
+
const fallback = hasCSS ? data.fallback : "";
|
|
36
|
+
const componentName = camelCaseIconComponentName(name, { pascalCase: true }, prefix);
|
|
37
|
+
vueComponentLines.push(`
|
|
38
|
+
const ${componentName} = defineComponent((props) => {
|
|
39
|
+
return () => h(Icon, {
|
|
40
|
+
...props,
|
|
41
|
+
content: ${JSON.stringify(parsedContent.content)},
|
|
42
|
+
${fallback ? `fallback: ${JSON.stringify(fallback)},` : ""}
|
|
43
|
+
viewBox,
|
|
44
|
+
})
|
|
45
|
+
}, iconProps);
|
|
46
|
+
|
|
47
|
+
export default ${componentName};
|
|
48
|
+
`);
|
|
49
|
+
shared.push({
|
|
50
|
+
filename: `${pathParts.join("/")}/${name}.d.ts`,
|
|
51
|
+
content: `import * as vue from 'vue';
|
|
52
|
+
import { type CSSIconComponentProps } from '@iconify/css-vue';
|
|
53
|
+
|
|
54
|
+
type IconComponentProps = Pick<CSSIconComponentProps, 'width' | 'height'>;
|
|
55
|
+
|
|
56
|
+
declare const ${componentName}: vue.DefineSetupFnComponent<IconComponentProps, {}, {}, IconComponentProps & {}, vue.PublicProps>;
|
|
57
|
+
export default ${componentName};
|
|
58
|
+
`
|
|
59
|
+
});
|
|
60
|
+
return {
|
|
61
|
+
prefix,
|
|
62
|
+
name,
|
|
63
|
+
componentName,
|
|
64
|
+
main: {
|
|
65
|
+
filename: `${pathParts.join("/")}/${name}.js`,
|
|
66
|
+
content: vueComponentLines.join("\n")
|
|
67
|
+
},
|
|
68
|
+
shared
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export { createIconifyVueComponent };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { StringifyXMLOptions } from "../../xml/types.js";
|
|
2
|
+
import { ConvertedSVGContent } from "../types.js";
|
|
3
|
+
import { IconViewBox } from "../../svg/viewbox/types.js";
|
|
4
|
+
/**
|
|
5
|
+
* Options for component factory
|
|
6
|
+
*/
|
|
7
|
+
interface ComponentFactoryOptions extends StringifyXMLOptions {
|
|
8
|
+
addPrefixToFilenames: boolean;
|
|
9
|
+
classNamePrefix: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Pre-parsed SVG content, based on convertSVGContentToCSSRules() result
|
|
13
|
+
*/
|
|
14
|
+
interface SVGPreParsedContent extends ConvertedSVGContent {
|
|
15
|
+
css?: Record<string, string>;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Data for component factory
|
|
19
|
+
*/
|
|
20
|
+
interface ComponentFactoryIconData {
|
|
21
|
+
prefix?: string;
|
|
22
|
+
name: string;
|
|
23
|
+
fallback: string;
|
|
24
|
+
content: string | SVGPreParsedContent;
|
|
25
|
+
viewBox: IconViewBox;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* File generated by component factory
|
|
29
|
+
*/
|
|
30
|
+
interface ExportedComponentFile {
|
|
31
|
+
filename: string;
|
|
32
|
+
content: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Exported component
|
|
36
|
+
*/
|
|
37
|
+
interface ExportedComponent {
|
|
38
|
+
prefix?: string;
|
|
39
|
+
name: string;
|
|
40
|
+
componentName: string;
|
|
41
|
+
main: ExportedComponentFile;
|
|
42
|
+
shared: ExportedComponentFile[];
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Component factory
|
|
46
|
+
*/
|
|
47
|
+
type ComponentFactory = (data: ComponentFactoryIconData, options?: Partial<ComponentFactoryOptions>) => ExportedComponent;
|
|
48
|
+
export { ComponentFactory, ComponentFactoryIconData, ComponentFactoryOptions, ExportedComponent, ExportedComponentFile, SVGPreParsedContent };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
+
import { CSSRules } from "../css/types.js";
|
|
1
2
|
/**
|
|
2
3
|
* SVG property types
|
|
3
4
|
*/
|
|
4
5
|
type SVGPropertyType = 'path' | 'px' | 'raw';
|
|
5
|
-
/**
|
|
6
|
-
* CSS rules
|
|
7
|
-
*/
|
|
8
|
-
type CSSRules = Record<string, string>;
|
|
9
6
|
/**
|
|
10
7
|
* Result of converting SVG properties to CSS
|
|
11
8
|
*/
|
|
@@ -18,6 +15,6 @@ interface SVGConvertedToCSSProperties {
|
|
|
18
15
|
*/
|
|
19
16
|
interface ConvertedSVGContent {
|
|
20
17
|
content: string;
|
|
21
|
-
|
|
18
|
+
classes?: Record<string, CSSRules>;
|
|
22
19
|
}
|
|
23
|
-
export {
|
|
20
|
+
export { ConvertedSVGContent, SVGConvertedToCSSProperties, SVGPropertyType };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"type": "module",
|
|
4
4
|
"description": "Common functions for working with SVG used by various packages.",
|
|
5
5
|
"author": "Vjacheslav Trushkin",
|
|
6
|
-
"version": "0.0.
|
|
6
|
+
"version": "0.0.17",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"bugs": "https://github.com/cyberalien/svg-utils/issues",
|
|
9
9
|
"homepage": "https://cyberalien.dev/",
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { StringifyXMLOptions } from "../../../xml/types.js";
|
|
2
|
-
import { ConvertedSVGContent } from "../types.js";
|
|
3
|
-
interface Options extends StringifyXMLOptions {
|
|
4
|
-
classNamePrefix?: string;
|
|
5
|
-
}
|
|
6
|
-
/**
|
|
7
|
-
*
|
|
8
|
-
*/
|
|
9
|
-
declare function convertSVGContentToCSS(content: string, options?: Options): ConvertedSVGContent;
|
|
10
|
-
export { convertSVGContentToCSS };
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { parseXMLContent } from "../../../xml/parse.js";
|
|
2
|
-
import { stringifyXMLContent } from "../../../xml/stringify.js";
|
|
3
|
-
import { stringifyCSSRules } from "../css/stringify.js";
|
|
4
|
-
import { convertSVGRootToCSS } from "./root.js";
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
*
|
|
8
|
-
*/
|
|
9
|
-
function convertSVGContentToCSS(content, options) {
|
|
10
|
-
const root = parseXMLContent(content);
|
|
11
|
-
if (!root) return { content };
|
|
12
|
-
const classNames = convertSVGRootToCSS(root, options?.classNamePrefix);
|
|
13
|
-
if (classNames) {
|
|
14
|
-
const newContent = stringifyXMLContent(root, options);
|
|
15
|
-
if (newContent) {
|
|
16
|
-
const rules = Object.create(null);
|
|
17
|
-
for (const className in classNames) rules[className] = stringifyCSSRules(classNames[className]);
|
|
18
|
-
return {
|
|
19
|
-
content: newContent,
|
|
20
|
-
rules
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
return { content };
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export { convertSVGContentToCSS };
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|