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

package/README.md

@@ -42,14 +42,12 @@ import { AddFillIcon as AddFillIcon36 } from '@salutejs/sdds-icons/36';
 <AddFillIcon width={32} height={32} color="tomato" />
 ```
 
-Через свойство `gradient` можно передать CSS-градиент. В этом случае оптимизированный SVG используется как CSS-маска, а градиент заполняет всю область иконки:
+В `color` также можно передать CSS-градиент. В этом случае контур иконки используется как маска, а градиент заполняет всю область иконки:
 
 ```tsx
-<AddFillIcon gradient="linear-gradient(135deg, #00d6ff 0%, #9b51e0 100%)" />
+<AddFillIcon color="linear-gradient(135deg, #00d6ff 0%, #9b51e0 100%)" />
 ```
 
-Для отображения градиентов Content Security Policy приложения должна разрешать `data:` в директиве `img-src`.
-
 ## Динамические иконки
 
 Если имя иконки приходит во время выполнения, например из CMS или с сервера, используйте отдельную динамическую точку входа нужного размера:
@@ -77,7 +75,7 @@ export const ServerIcon = ({ iconName }: { iconName: string }) =>
     isIconName(iconName) ? <DynamicIcon name={iconName} /> : null;
 ```
 
-Также динамическая точка входа экспортирует `IconName`, `iconNames` и `isIconName`. Реестр загрузчиков остается внутренней деталью реализации `DynamicIcon`.
+Также динамическая точка входа экспортирует `IconName`, `iconNames` и `dynamicIconImports`. Реестр генерируется автоматически из SVG выбранного размера.
 
 Динамический API предназначен только для случаев, когда имя заранее неизвестно. Он заставляет сборщик обработать весь реестр и создать отдельный модуль для каждой иконки. Для обычного интерфейса статические импорты быстрее при сборке и не требуют дополнительного запроса в браузере.
 
@@ -94,13 +92,13 @@ svg/
 
 Сейчас в пакете оставлена одна иконка в трёх размерах для разработки архитектуры. Чтобы добавить новую иконку, положите SVG с одинаковым именем во все три директории. Например, `Search.svg` должен существовать в `svg/16`, `svg/24` и `svg/36`.
 
-Команда сборки создаёт уникальное временное дерево `.build-temp-*`, генерирует в нём React-компоненты, динамические реестры и точки входа, компилирует его TypeScript и удаляет временные файлы:
+Команда сборки создаёт временное дерево `build-temp`, генерирует в нём React-компоненты, динамические реестры и точки входа, компилирует его TypeScript и удаляет временные файлы:
 
 ```sh
 npm run build
 ```
 
-Временное дерево удаляется и после успешной сборки, и при ошибке. Готовый `dist` заменяется только после успешной генерации и TypeScript-компиляции. В `src` находятся общая фабрика `createIcon` и размерные фабрики `createIcon16`, `createIcon24`, `createIcon36`: они задают размер, `viewBox`, поддержку `ref`, стандартных SVG-свойств и градиентного `gradient`. Единственным источником геометрии иконок остаются файлы в `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

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

package/dist/16/AccessibilityIcon.js

@@ -2,6 +2,6 @@
 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: "M13.277 4.111a.605.605 0 0 1 .25 1.18c-.943.206-1.82.366-2.66.478l-.149.02c-.45.073-.581.248-.638.36-.08.16-.089.353-.089.568v7.679a.6.6 0 0 1-.597.604.6.6 0 0 1-.597-.604v-2.432c0-.74-.134-1.127-.27-1.316-.108-.15-.256-.231-.527-.231-.27 0-.419.081-.527.231-.136.189-.27.575-.27 1.316v2.432a.6.6 0 0 1-.597.604.6.6 0 0 1-.598-.604v-7.68c0-.215-.008-.408-.089-.568-.056-.11-.188-.286-.638-.36l-.147-.02a33 33 0 0 1-2.662-.476.604.604 0 0 1 .25-1.18 32 32 0 0 0 2.727.48 19.6 19.6 0 0 0 5.27-.023c.8-.106 1.641-.258 2.558-.458" }),
-    React.createElement("path", { fill: "currentColor", d: "M8 1c.866 0 1.568.71 1.569 1.586S8.866 4.173 8 4.173s-1.568-.711-1.568-1.587S7.134 1 8 1" })), "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='black' d='M13.277 4.111a.605.605 0 0 1 .25 1.18c-.943.206-1.82.366-2.66.478l-.149.02c-.45.073-.581.248-.638.36-.08.16-.089.353-.089.568v7.679a.6.6 0 0 1-.597.604.6.6 0 0 1-.597-.604v-2.432c0-.74-.134-1.127-.27-1.316-.108-.15-.256-.231-.527-.231-.27 0-.419.081-.527.231-.136.189-.27.575-.27 1.316v2.432a.6.6 0 0 1-.597.604.6.6 0 0 1-.598-.604v-7.68c0-.215-.008-.408-.089-.568-.056-.11-.188-.286-.638-.36l-.147-.02a33 33 0 0 1-2.662-.476.604.604 0 0 1 .25-1.18 32 32 0 0 0 2.727.48 19.6 19.6 0 0 0 5.27-.023c.8-.106 1.641-.258 2.558-.458'/%3E%3Cpath fill='black' d='M8 1c.866 0 1.568.71 1.569 1.586S8.866 4.173 8 4.173s-1.568-.711-1.568-1.587S7.134 1 8 1'/%3E%3C/svg%3E");
+    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/DynamicIcon.d.ts

@@ -5,7 +5,6 @@ export type IconName = keyof typeof dynamicIconImports;
 export interface DynamicIconProps extends ComponentPropsWithoutRef<'svg'> {
     name: IconName;
     fallback?: ReactNode;
-    gradient?: string;
 }
 export declare const iconNames: IconName[];
 export declare const isIconName: (name: string) => name is IconName;

package/dist/16/DynamicIcon.js

@@ -1,34 +1,25 @@
 'use client';
 import React, { forwardRef, useEffect, useState } from 'react';
 import dynamicIconImports from './dynamicIconImports.js';
-const iconLoaders = dynamicIconImports;
 export const iconNames = Object.keys(dynamicIconImports);
 export const isIconName = (name) => Object.prototype.hasOwnProperty.call(dynamicIconImports, name);
 const loadIcon = async (name) => {
     if (!isIconName(name)) {
         throw new Error(`[sdds-icons]: Icon "${name}" was not found`);
     }
-    const iconModule = await iconLoaders[name]();
+    const iconModule = await dynamicIconImports[name]();
     return iconModule.default;
 };
 export const DynamicIcon = /* @__PURE__ */ forwardRef(({ name, fallback = null, ...props }, ref) => {
     const [loadedIcon, setLoadedIcon] = useState();
     useEffect(() => {
-        let active = true;
         loadIcon(name)
             .then((component) => {
-            if (active) {
-                setLoadedIcon({ name, component });
-            }
+            setLoadedIcon({ name, component });
         })
             .catch((error) => {
-            if (active) {
-                console.error(error);
-            }
+            console.error(error);
         });
-        return () => {
-            active = false;
-        };
     }, [name]);
     if (loadedIcon?.name !== name) {
         return React.createElement(React.Fragment, null, fallback);

package/dist/16/dynamic.d.ts

@@ -1,2 +1,3 @@
 export { DynamicIcon, DynamicIcon as default, iconNames, isIconName } from './DynamicIcon.js';
 export type { DynamicIconProps, IconName } from './DynamicIcon.js';
+export { default as dynamicIconImports } from './dynamicIconImports.js';

package/dist/16/dynamic.js

@@ -1,2 +1,3 @@
 // This file is generated from svg/16. Do not edit it manually.
 export { DynamicIcon, DynamicIcon as default, iconNames, isIconName } from './DynamicIcon.js';
+export { default as dynamicIconImports } from './dynamicIconImports.js';