@snack-uikit/icons 0.20.1 → 0.20.2-preview-3cdd8d31.0

package/README.md

@@ -8,8 +8,6 @@
 1. Подключите `svg-inline-loader` в конфигурацию webpack-a:
 
 ```typescript
-import { SVG_SPRITE_WEBPACK_REG_EXP } from '@snack-uikit/icons';
-
 export default {
   module: {
     rules: [

package/dist/utils/createSprite.d.ts

@@ -0,0 +1,6 @@
+export declare function createSprite({ source, destinations, fileName, prefix, }: {
+    source: string;
+    destinations?: string[];
+    fileName?: string;
+    prefix?: string;
+}): Promise<void>;

package/dist/utils/createSprite.js

@@ -0,0 +1,47 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { mkdirSync, readFileSync, writeFileSync } from 'fs';
+import { basename, join } from 'path';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import SVGSpriter from 'svg-sprite';
+import { optimize } from 'svgo';
+import { getAllSVGPaths } from './getAllSVGPaths';
+const OUTPUT_DIRS = [join(...['src', 'sprite', 'svg']), join(...['dist', 'sprite', 'svg'])];
+const PREFIX = 'snack-uikit-';
+const FILENAME = 'sprite.symbol.svg';
+export function createSprite({ source, destinations = OUTPUT_DIRS, fileName = FILENAME, prefix = PREFIX, }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const spriter = new SVGSpriter({
+            dest: '',
+            mode: { symbol: true },
+            shape: {
+                transform: [
+                    {
+                        custom: (shape, sprite, callback) => {
+                            const updatedSVG = optimize(shape.getSVG().replace(/fill="[A-Za-z0-9#]+"/g, 'fill="inherit"')).data;
+                            shape.setSVG(updatedSVG);
+                            callback(null);
+                        },
+                    },
+                ],
+            },
+        });
+        const allPaths = getAllSVGPaths(source);
+        for (const path of allPaths) {
+            spriter.add(prefix + basename(path), null, readFileSync(path, 'utf-8'));
+        }
+        const { result } = yield spriter.compileAsync();
+        for (const dir of destinations) {
+            mkdirSync(dir, { recursive: true });
+            writeFileSync(join(dir, fileName), result.symbol.sprite.contents);
+        }
+    });
+}

package/dist/utils/getAllSVGPaths.d.ts

@@ -0,0 +1 @@
+export declare function getAllSVGPaths(directory: string): string[];

package/dist/utils/getAllSVGPaths.js

@@ -0,0 +1,21 @@
+import { readdirSync } from 'fs';
+import { join } from 'path';
+export function getAllSVGPaths(directory) {
+    const readDirectory = (path) => readdirSync(path, {
+        withFileTypes: true,
+        encoding: 'utf-8',
+    }).map(item => ({ item, parent: path }));
+    let currentItem;
+    const paths = [];
+    const queue = readDirectory(directory);
+    while ((currentItem = queue.shift())) {
+        if (currentItem.item.isFile() && currentItem.item.name.endsWith('.svg')) {
+            paths.push(join(currentItem.parent, currentItem.item.name));
+        }
+        if (currentItem.item.isDirectory()) {
+            const parentDirectory = join(currentItem.parent, currentItem.item.name);
+            queue.push(...readDirectory(parentDirectory));
+        }
+    }
+    return paths;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './createSprite';
+export * from './mergeSprites';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from './createSprite';
+export * from './mergeSprites';

package/dist/utils/mergeSprites.d.ts

@@ -0,0 +1,5 @@
+export declare function mergeSprites({ sprite1, sprite2, outputSprite, }: {
+    sprite1: string;
+    sprite2: string;
+    outputSprite: string;
+}): Promise<void>;

package/dist/utils/mergeSprites.js

@@ -0,0 +1,40 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { readFile, writeFile } from 'fs/promises';
+import { JSDOM } from 'jsdom';
+export function mergeSprites({ sprite1, sprite2, outputSprite, }) {
+    var _a;
+    return __awaiter(this, void 0, void 0, function* () {
+        // Read the SVG files
+        const svg1 = yield readFile(sprite1, 'utf-8');
+        const svg2 = yield readFile(sprite2, 'utf-8');
+        // Parse the SVG files
+        const dom1 = new JSDOM(svg1);
+        const dom2 = new JSDOM(svg2);
+        // Get the <symbol> elements
+        const symbols1 = dom1.window.document.querySelectorAll('symbol');
+        const symbols2 = dom2.window.document.querySelectorAll('symbol');
+        // Create a new SVG document
+        const outputDom = new JSDOM('<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+        const outputSvg = outputDom.window.document.querySelector('svg');
+        // Append the <symbol> elements from the second file to the new SVG document
+        symbols2.forEach(symbol => outputSvg === null || outputSvg === void 0 ? void 0 : outputSvg.appendChild(outputDom.window.document.importNode(symbol, true)));
+        // Append the <symbol> elements from the first file to the new SVG document,
+        // only if not present in the output file
+        symbols1.forEach(symbol => {
+            const id = symbol.getAttribute('id');
+            if (!(outputSvg === null || outputSvg === void 0 ? void 0 : outputSvg.querySelector(`symbol[id="${id}"]`))) {
+                outputSvg === null || outputSvg === void 0 ? void 0 : outputSvg.appendChild(outputDom.window.document.importNode(symbol, true));
+            }
+        });
+        // Write the new SVG document to a file
+        yield writeFile(outputSprite, (_a = outputSvg === null || outputSvg === void 0 ? void 0 : outputSvg.outerHTML) !== null && _a !== void 0 ? _a : '', 'utf-8');
+    });
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Icons",
-  "version": "0.20.1",
+  "version": "0.20.2-preview-3cdd8d31.0",
   "sideEffects": [
     "*.svg",
     "*.css",
@@ -40,14 +40,18 @@
     "build:interface-icons": "npm run fix:icons --directory=interface-icons && npm run build:icons --directory=interface-icons",
     "compile": "npm run validate:icons && npm run build:interface-icons && npm run create-export-index-file && npm run create-sprite"
   },
+  "dependencies": {
+    "jsdom": "24.0.0",
+    "svg-sprite": "2.0.2",
+    "svgo": "3.1.0"
+  },
   "devDependencies": {
     "@svgr/cli": "8.1.0",
     "@svgr/plugin-jsx": "8.1.0",
+    "@types/jsdom": "21.1.6",
     "@types/svg-sprite": "0.0.38",
     "fast-xml-parser": "4.2.5",
-    "oslllo-svg-fixer": "3.0.0",
-    "svg-sprite": "2.0.2",
-    "svgo": "3.1.0"
+    "oslllo-svg-fixer": "3.0.0"
   },
-  "gitHead": "b1acc8128bdab6f23b534d7c464208069e59ed8c"
+  "gitHead": "5c53d9cb0f3fcf9430b33814daca0755e43cc103"
 }

package/src/utils/createSprite.ts

@@ -0,0 +1,53 @@
+import { mkdirSync, readFileSync, writeFileSync } from 'fs';
+import { basename, join } from 'path';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import SVGSpriter from 'svg-sprite';
+import { optimize } from 'svgo';
+import { getAllSVGPaths } from './getAllSVGPaths';
+
+const OUTPUT_DIRS = [join(...['src', 'sprite', 'svg']), join(...['dist', 'sprite', 'svg'])];
+const PREFIX = 'snack-uikit-';
+const FILENAME = 'sprite.symbol.svg';
+
+export async function createSprite({
+  source,
+  destinations = OUTPUT_DIRS,
+  fileName = FILENAME,
+  prefix = PREFIX,
+}: {
+  source: string;
+  destinations?: string[];
+  fileName?: string;
+  prefix?: string;
+}) {
+  const spriter = new SVGSpriter({
+    dest: '',
+    mode: { symbol: true },
+    shape: {
+      transform: [
+        {
+          custom: (shape, sprite, callback) => {
+            const updatedSVG = optimize(shape.getSVG().replace(/fill="[A-Za-z0-9#]+"/g, 'fill="inherit"')).data;
+            shape.setSVG(updatedSVG);
+            callback(null);
+          },
+        },
+      ],
+    },
+  });
+
+  const allPaths = getAllSVGPaths(source);
+
+  for (const path of allPaths) {
+    spriter.add(prefix + basename(path), null, readFileSync(path, 'utf-8'));
+  }
+
+  const { result } = await spriter.compileAsync();
+
+  for (const dir of destinations) {
+    mkdirSync(dir, { recursive: true });
+    writeFileSync(join(dir, fileName), result.symbol.sprite.contents);
+  }
+}

package/src/utils/getAllSVGPaths.ts

@@ -0,0 +1,32 @@
+import { Dirent, readdirSync } from 'fs';
+import { join } from 'path';
+
+type CurrentItem = {
+  item: Dirent;
+  parent: string;
+};
+
+export function getAllSVGPaths(directory: string): string[] {
+  const readDirectory = (path: string) =>
+    readdirSync(path, {
+      withFileTypes: true,
+      encoding: 'utf-8',
+    }).map(item => ({ item, parent: path }));
+
+  let currentItem: CurrentItem | undefined;
+  const paths: string[] = [];
+  const queue = readDirectory(directory);
+
+  while ((currentItem = queue.shift())) {
+    if (currentItem.item.isFile() && currentItem.item.name.endsWith('.svg')) {
+      paths.push(join(currentItem.parent, currentItem.item.name));
+    }
+
+    if (currentItem.item.isDirectory()) {
+      const parentDirectory = join(currentItem.parent, currentItem.item.name);
+      queue.push(...readDirectory(parentDirectory));
+    }
+  }
+
+  return paths;
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './createSprite';
+export * from './mergeSprites';

package/src/utils/mergeSprites.ts

@@ -0,0 +1,44 @@
+import { readFile, writeFile } from 'fs/promises';
+import { JSDOM } from 'jsdom';
+
+export async function mergeSprites({
+  sprite1,
+  sprite2,
+  outputSprite,
+}: {
+  sprite1: string;
+  sprite2: string;
+  outputSprite: string;
+}) {
+  // Read the SVG files
+  const svg1 = await readFile(sprite1, 'utf-8');
+  const svg2 = await readFile(sprite2, 'utf-8');
+
+  // Parse the SVG files
+  const dom1 = new JSDOM(svg1);
+  const dom2 = new JSDOM(svg2);
+
+  // Get the <symbol> elements
+  const symbols1 = dom1.window.document.querySelectorAll('symbol');
+  const symbols2 = dom2.window.document.querySelectorAll('symbol');
+
+  // Create a new SVG document
+  const outputDom = new JSDOM('<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+  const outputSvg = outputDom.window.document.querySelector('svg');
+
+  // Append the <symbol> elements from the second file to the new SVG document
+  symbols2.forEach(symbol => outputSvg?.appendChild(outputDom.window.document.importNode(symbol, true)));
+
+  // Append the <symbol> elements from the first file to the new SVG document,
+  // only if not present in the output file
+  symbols1.forEach(symbol => {
+    const id = symbol.getAttribute('id');
+
+    if (!outputSvg?.querySelector(`symbol[id="${id}"]`)) {
+      outputSvg?.appendChild(outputDom.window.document.importNode(symbol, true));
+    }
+  });
+
+  // Write the new SVG document to a file
+  await writeFile(outputSprite, outputSvg?.outerHTML ?? '', 'utf-8');
+}