@salutejs/sdds-icons 0.2.0-next-sbcom.0 → 0.2.0

package/README.md

@@ -42,6 +42,12 @@ import { AddFillIcon as AddFillIcon36 } from '@salutejs/sdds-icons/36';
 <AddFillIcon width={32} height={32} color="tomato" />
 ```
 
+В `color` также можно передать CSS-градиент. В этом случае контур иконки используется как маска, а градиент заполняет всю область иконки:
+
+```tsx
+<AddFillIcon color="linear-gradient(135deg, #00d6ff 0%, #9b51e0 100%)" />
+```
+
 ## Динамические иконки
 
 Если имя иконки приходит во время выполнения, например из CMS или с сервера, используйте отдельную динамическую точку входа нужного размера:
@@ -92,7 +98,7 @@ svg/
 npm run build
 ```
 
-Временное дерево `build-temp` удаляется и после успешной сборки, и при ошибке. В `src` находятся только общие фабрики `createIcon16`, `createIcon24` и `createIcon36`: они задают размер, `viewBox`, поддержку `ref` и стандартных SVG-свойств. Единственным источником геометрии иконок остаются файлы в `svg`. SVGO оптимизирует SVG-разметку, а SVGR преобразует её в JSX; заполнения и обводки становятся `currentColor`.
+Временное дерево `build-temp` удаляется и после успешной сборки, и при ошибке. В `src` находятся общая фабрика `createIcon` и размерные фабрики `createIcon16`, `createIcon24`, `createIcon36`: они задают размер, `viewBox`, поддержку `ref`, стандартных SVG-свойств и градиентного `color`. Единственным источником геометрии иконок остаются файлы в `svg`. SVGO оптимизирует SVG-разметку, а SVGR преобразует её в JSX; заполнения и обводки становятся `currentColor`.
 
 ### Android
 

package/dist/16/AccessibilityIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const AccessibilityIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default AccessibilityIcon;

package/dist/16/AccessibilityIcon.js

@@ -0,0 +1,7 @@
+// This file is generated. Do not edit it manually.
+import React from 'react';
+import { createIcon16 } from '../createIcon16.js';
+export const AccessibilityIcon = /* @__PURE__ */ createIcon16(React.createElement(React.Fragment, null,
+    React.createElement("path", { fill: "currentColor", d: "M12 6.5A2.25 2.25 0 1 0 12 2a2.25 2.25 0 0 0 0 4.5" }),
+    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.46 6.272a1 1 0 0 0-.42 1.956 48 48 0 0 0 4.045.705c.588.096.737.316.792.414.108.192.123.44.123.76V21a1 1 0 1 0 2 0v-3.45c0-1.038.19-1.55.359-1.78.123-.17.288-.27.641-.27s.519.1.641.27c.169.23.36.742.36 1.78V21a1 1 0 1 0 2 0V10.108c0-.322.015-.569.122-.76.055-.099.205-.32.793-.415l.215-.027a48 48 0 0 0 3.83-.678 1 1 0 0 0-.421-1.956 46 46 0 0 1-3.896.68 28.3 28.3 0 0 1-7.527-.031 46 46 0 0 1-3.657-.649", clipRule: "evenodd" })));
+export default AccessibilityIcon;

package/dist/16/dynamicIconImports.d.ts

@@ -1,4 +1,4 @@
 declare const dynamicIconImports: {
-    readonly AddFillIcon: () => Promise<typeof import("./AddFillIcon.js")>;
+    readonly AccessibilityIcon: () => Promise<typeof import("./AccessibilityIcon.js")>;
 };
 export default dynamicIconImports;

package/dist/16/dynamicIconImports.js

@@ -1,5 +1,5 @@
 // This file is generated from svg/16. Do not edit it manually.
 const dynamicIconImports = {
-    AddFillIcon: () => import('./AddFillIcon.js'),
+    AccessibilityIcon: () => import('./AccessibilityIcon.js'),
 };
 export default dynamicIconImports;

package/dist/16/index.d.ts

@@ -1 +1 @@
-export { AddFillIcon } from './AddFillIcon.js';
+export { AccessibilityIcon } from './AccessibilityIcon.js';

package/dist/16/index.js

@@ -1,2 +1,2 @@
 // This file is generated from svg/16. Do not edit it manually.
-export { AddFillIcon } from './AddFillIcon.js';
+export { AccessibilityIcon } from './AccessibilityIcon.js';

package/dist/24/AccessibilityIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const AccessibilityIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default AccessibilityIcon;

package/dist/24/AccessibilityIcon.js

@@ -0,0 +1,7 @@
+// This file is generated. Do not edit it manually.
+import React from 'react';
+import { createIcon24 } from '../createIcon24.js';
+export const AccessibilityIcon = /* @__PURE__ */ createIcon24(React.createElement(React.Fragment, null,
+    React.createElement("path", { fill: "currentColor", d: "M12 6.5A2.25 2.25 0 1 0 12 2a2.25 2.25 0 0 0 0 4.5" }),
+    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.46 6.272a1 1 0 0 0-.42 1.956 48 48 0 0 0 4.045.705c.588.096.737.316.792.414.108.192.123.44.123.76V21a1 1 0 1 0 2 0v-3.45c0-1.038.19-1.55.359-1.78.123-.17.288-.27.641-.27s.519.1.641.27c.169.23.36.742.36 1.78V21a1 1 0 1 0 2 0V10.108c0-.322.015-.569.122-.76.055-.099.205-.32.793-.415l.215-.027a48 48 0 0 0 3.83-.678 1 1 0 0 0-.421-1.956 46 46 0 0 1-3.896.68 28.3 28.3 0 0 1-7.527-.031 46 46 0 0 1-3.657-.649", clipRule: "evenodd" })));
+export default AccessibilityIcon;

package/dist/24/dynamicIconImports.d.ts

@@ -1,4 +1,4 @@
 declare const dynamicIconImports: {
-    readonly AddFillIcon: () => Promise<typeof import("./AddFillIcon.js")>;
+    readonly AccessibilityIcon: () => Promise<typeof import("./AccessibilityIcon.js")>;
 };
 export default dynamicIconImports;

package/dist/24/dynamicIconImports.js

@@ -1,5 +1,5 @@
 // This file is generated from svg/24. Do not edit it manually.
 const dynamicIconImports = {
-    AddFillIcon: () => import('./AddFillIcon.js'),
+    AccessibilityIcon: () => import('./AccessibilityIcon.js'),
 };
 export default dynamicIconImports;

package/dist/24/index.d.ts

@@ -1 +1 @@
-export { AddFillIcon } from './AddFillIcon.js';
+export { AccessibilityIcon } from './AccessibilityIcon.js';

package/dist/24/index.js

@@ -1,2 +1,2 @@
 // This file is generated from svg/24. Do not edit it manually.
-export { AddFillIcon } from './AddFillIcon.js';
+export { AccessibilityIcon } from './AccessibilityIcon.js';

package/dist/36/AccessibilityIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const AccessibilityIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default AccessibilityIcon;

package/dist/36/AccessibilityIcon.js

@@ -0,0 +1,7 @@
+// This file is generated. Do not edit it manually.
+import React from 'react';
+import { createIcon36 } from '../createIcon36.js';
+export const AccessibilityIcon = /* @__PURE__ */ createIcon36(React.createElement(React.Fragment, null,
+    React.createElement("path", { fill: "currentColor", d: "M12 6.5A2.25 2.25 0 1 0 12 2a2.25 2.25 0 0 0 0 4.5" }),
+    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.46 6.272a1 1 0 0 0-.42 1.956 48 48 0 0 0 4.045.705c.588.096.737.316.792.414.108.192.123.44.123.76V21a1 1 0 1 0 2 0v-3.45c0-1.038.19-1.55.359-1.78.123-.17.288-.27.641-.27s.519.1.641.27c.169.23.36.742.36 1.78V21a1 1 0 1 0 2 0V10.108c0-.322.015-.569.122-.76.055-.099.205-.32.793-.415l.215-.027a48 48 0 0 0 3.83-.678 1 1 0 0 0-.421-1.956 46 46 0 0 1-3.896.68 28.3 28.3 0 0 1-7.527-.031 46 46 0 0 1-3.657-.649", clipRule: "evenodd" })));
+export default AccessibilityIcon;

package/dist/36/dynamicIconImports.d.ts

@@ -1,4 +1,4 @@
 declare const dynamicIconImports: {
-    readonly AddFillIcon: () => Promise<typeof import("./AddFillIcon.js")>;
+    readonly AccessibilityIcon: () => Promise<typeof import("./AccessibilityIcon.js")>;
 };
 export default dynamicIconImports;

package/dist/36/dynamicIconImports.js

@@ -1,5 +1,5 @@
 // This file is generated from svg/36. Do not edit it manually.
 const dynamicIconImports = {
-    AddFillIcon: () => import('./AddFillIcon.js'),
+    AccessibilityIcon: () => import('./AccessibilityIcon.js'),
 };
 export default dynamicIconImports;

package/dist/36/index.d.ts

@@ -1 +1 @@
-export { AddFillIcon } from './AddFillIcon.js';
+export { AccessibilityIcon } from './AccessibilityIcon.js';

package/dist/36/index.js

@@ -1,2 +1,2 @@
 // This file is generated from svg/36. Do not edit it manually.
-export { AddFillIcon } from './AddFillIcon.js';
+export { AccessibilityIcon } from './AccessibilityIcon.js';

package/dist/createIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+export declare const createIcon: (content: ReactNode, size: number) => React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/createIcon.js

@@ -0,0 +1,20 @@
+import React, { forwardRef, useRef } from 'react';
+const isGradient = (color) => typeof color === 'string' && /gradient/.test(color);
+let maskCounter = 0;
+export const createIcon = (content, size) => {
+    return forwardRef(({ color, ...props }, ref) => {
+        const maskIdRef = useRef('');
+        if (!maskIdRef.current) {
+            maskIdRef.current = `sdds-icon-${maskCounter++}-${size}`;
+        }
+        const maskId = maskIdRef.current;
+        const gradient = isGradient(color);
+        return (React.createElement("svg", { ref: ref, width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", color: gradient ? undefined : color, ...props }, gradient ? (React.createElement(React.Fragment, null,
+            React.createElement("defs", null,
+                React.createElement("mask", { id: maskId },
+                    React.createElement("g", { color: "white" }, content))),
+            React.createElement("g", { mask: `url(#${maskId})` },
+                React.createElement("foreignObject", { width: "100%", height: "100%" },
+                    React.createElement("div", { style: { width: '100%', height: '100%', background: color } }))))) : (content)));
+    });
+};

package/dist/createIcon16.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import type { ReactNode } from 'react';
-export declare const createIcon16: (content: ReactNode) => React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const createIcon16: (content: ReactNode) => import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/createIcon16.js

@@ -1,2 +1,2 @@
-import React, { forwardRef } from 'react';
-export const createIcon16 = (content) => forwardRef((props, ref) => (React.createElement("svg", { ref: ref, width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, content)));
+import { createIcon } from './createIcon.js';
+export const createIcon16 = (content) => createIcon(content, 16);

package/dist/createIcon24.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import type { ReactNode } from 'react';
-export declare const createIcon24: (content: ReactNode) => React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const createIcon24: (content: ReactNode) => import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/createIcon24.js

@@ -1,2 +1,2 @@
-import React, { forwardRef } from 'react';
-export const createIcon24 = (content) => forwardRef((props, ref) => (React.createElement("svg", { ref: ref, width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, content)));
+import { createIcon } from './createIcon.js';
+export const createIcon24 = (content) => createIcon(content, 24);

package/dist/createIcon36.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import type { ReactNode } from 'react';
-export declare const createIcon36: (content: ReactNode) => React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const createIcon36: (content: ReactNode) => import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/createIcon36.js

@@ -1,2 +1,2 @@
-import React, { forwardRef } from 'react';
-export const createIcon36 = (content) => forwardRef((props, ref) => (React.createElement("svg", { ref: ref, width: 36, height: 36, viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, content)));
+import { createIcon } from './createIcon.js';
+export const createIcon36 = (content) => createIcon(content, 36);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/sdds-icons",
-  "version": "0.2.0-next-sbcom.0",
+  "version": "0.2.0",
   "description": "SDDS icons",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -80,5 +80,5 @@
   "contributors": [
     "salute.developers@gmail.com"
   ],
-  "gitHead": "24bceb36ff9e792411ee166bd57ccf5f938feb46"
+  "gitHead": "8adbf69d7ee75803b6d25b4a2e19f8ca16b29191"
 }

package/dist/16/AddFillIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const AddFillIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default AddFillIcon;

package/dist/16/AddFillIcon.js

@@ -1,7 +0,0 @@
-// This file is generated. Do not edit it manually.
-import React from 'react';
-import { createIcon16 } from '../createIcon16.js';
-export const AddFillIcon = /* @__PURE__ */ createIcon16(React.createElement(React.Fragment, null,
-    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.698 3.25c0-.966.783-1.75 1.75-1.75h7.304c.966 0 1.75.784 1.75 1.75v7.238a1.75 1.75 0 0 1-1.75 1.75H5.448a1.75 1.75 0 0 1-1.75-1.75zm5.401.434a.5.5 0 0 1 .5.5v2.184h2.2a.5.5 0 1 1 0 1H9.607l.029 2.178a.5.5 0 1 1-1 .013l-.03-2.191H6.399a.5.5 0 1 1 0-1H8.6V4.184a.5.5 0 0 1 .5-.5", clipRule: "evenodd" }),
-    React.createElement("path", { fill: "currentColor", d: "M2.5 5.411a.5.5 0 0 0-1 0v6.84a2.25 2.25 0 0 0 2.25 2.25h6.893a.5.5 0 1 0 0-1H3.75c-.69 0-1.25-.56-1.25-1.25z" })));
-export default AddFillIcon;

package/dist/24/AddFillIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const AddFillIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default AddFillIcon;

package/dist/24/AddFillIcon.js

@@ -1,7 +0,0 @@
-// This file is generated. Do not edit it manually.
-import React from 'react';
-import { createIcon24 } from '../createIcon24.js';
-export const AddFillIcon = /* @__PURE__ */ createIcon24(React.createElement(React.Fragment, null,
-    React.createElement("path", { fill: "currentColor", d: "M5.226 19.482c.212.017.492.018.924.018h10.1a.75.75 0 0 1 0 1.5H6.121c-.395 0-.736 0-1.017-.023a2.3 2.3 0 0 1-.875-.222 2.25 2.25 0 0 1-.984-.983 2.3 2.3 0 0 1-.222-.876C3 18.616 3 18.274 3 17.88V7.75a.75.75 0 0 1 1.5 0v10.1c0 .432 0 .712.018.924.017.204.045.28.064.316a.75.75 0 0 0 .328.328c.037.02.112.047.316.064" }),
-    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M18.896 17.977c-.28.023-.622.023-1.017.023H9.12c-.395 0-.736 0-1.017-.023a2.3 2.3 0 0 1-.875-.222 2.25 2.25 0 0 1-.984-.983 2.3 2.3 0 0 1-.222-.876C6 15.616 6 15.274 6 14.88V6.12c0-.395 0-.736.023-1.017a2.3 2.3 0 0 1 .222-.875 2.25 2.25 0 0 1 .984-.984 2.3 2.3 0 0 1 .875-.222C8.384 3 8.726 3 9.12 3h8.758c.395 0 .736 0 1.017.023.297.024.592.078.875.222.424.216.768.56.984.984.144.283.198.578.222.875.023.28.023.622.023 1.017v8.758c0 .395 0 .736-.023 1.017a2.3 2.3 0 0 1-.222.875c-.216.424-.56.768-.983.984-.284.144-.58.198-.876.222M14.25 6.75a.75.75 0 0 0-1.5 0v3h-3a.75.75 0 0 0 0 1.5h3.01l.04 3.01a.75.75 0 1 0 1.5-.02l-.04-2.99h2.99a.75.75 0 0 0 0-1.5h-3z", clipRule: "evenodd" })));
-export default AddFillIcon;

package/dist/36/AddFillIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const AddFillIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default AddFillIcon;

package/dist/36/AddFillIcon.js

@@ -1,6 +0,0 @@
-// This file is generated. Do not edit it manually.
-import React from 'react';
-import { createIcon36 } from '../createIcon36.js';
-export const AddFillIcon = /* @__PURE__ */ createIcon36(React.createElement(React.Fragment, null,
-    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M8.725 7a3 3 0 0 1 3-3h17.277a3 3 0 0 1 3 3v17.278a3 3 0 0 1-3 3H11.725a3 3 0 0 1-3-3zm11.639 1.82a1 1 0 0 1 1 1v4.819h4.82a1 1 0 1 1 0 2h-4.807l.064 4.806a1 1 0 1 1-2 .026l-.064-4.832h-4.833a1 1 0 1 1 0-2h4.82v-4.82a1 1 0 0 1 1-1M6 11.45a1 1 0 1 0-2 0v16.553a4 4 0 0 0 4 4h17.485a1 1 0 0 0 0-2H8a2 2 0 0 1-2-2z", clipRule: "evenodd" })));
-export default AddFillIcon;