plasma-icons: Handle all sizes [React]

packages/plasma-icons/scripts/generateReactComponents.ts

@@ -3,7 +3,11 @@ import * as path from 'path';
 import { getIconAsset, getIconComponent } from './utils';
 
 const rootPath = './src-build/scalable';
+
+const sourceDirectory16 = `${rootPath}/Icon.svg.16`;
+const sourceDirectory36 = `${rootPath}/Icon.svg.36`;
 const sourceDirectory = `${rootPath}/Icon.svg.24`;
+
 const AssetDirectory16 = `${rootPath}/Icon.assets.16`;
 const AssetDirectory24 = `${rootPath}/Icon.assets.24`;
 const AssetDirectory36 = `${rootPath}/Icon.assets.36`;
@@ -17,6 +21,11 @@ const destinations = [AssetDirectory16, AssetDirectory24, AssetDirectory36, Icon
 
 const files = fs.readdirSync(sourceDirectory);
 
+// INFO: заглушка под другие размеры, использовать по необходимости
+// const assetContentNull = `export const ${componentName} = null;\n`;
+// @example
+// fs.writeFileSync(getPath(AssetDirectory42, componentName), assetContentNull, 'utf8')
+
 // Создаем директории, если нет
 destinations.forEach((destination) => {
     if (!fs.existsSync(destination)) {
@@ -26,32 +35,37 @@ destinations.forEach((destination) => {
 
 const names: Array<string> = [];
 
+const getPath = (dir: string, name: string) => {
+    return path.join(dir, `${name}.tsx`);
+};
+
 files.forEach((file) => {
-    const sourceFilePath = path.join(sourceDirectory, file);
     const extension = path.extname(file);
 
     if (extension !== '.svg') {
         return;
     }
 
-    const data = fs.readFileSync(sourceFilePath, 'utf8');
+    const svg16 = fs.readFileSync(path.join(sourceDirectory16, file), 'utf8');
+    const svg24 = fs.readFileSync(path.join(sourceDirectory, file), 'utf8');
+    const svg36 = fs.readFileSync(path.join(sourceDirectory36, file), 'utf8');
 
     const componentName = path.parse(file).name;
+
     names.push(componentName);
-    const assetContent24 = getIconAsset(data, componentName);
-    // заглушка под другие размеры
-    const assetContentNull = `export const ${componentName} = null;\n`;
-    const componentContent = getIconComponent(componentName);
 
-    const getPath = (dir: string, name: string) => {
-        return path.join(dir, `${name}.tsx`);
-    };
+    const assetContent16 = getIconAsset(svg16, componentName);
+    const assetContent24 = getIconAsset(svg24, componentName);
+    const assetContent36 = getIconAsset(svg36, componentName);
+
+    const componentContent = getIconComponent(componentName);
 
-    // генерируем файлы-ассеты
-    fs.writeFileSync(getPath(AssetDirectory16, componentName), assetContentNull, 'utf8');
+    // генерируем файлы-assets
+    fs.writeFileSync(getPath(AssetDirectory16, componentName), assetContent16, 'utf8');
     fs.writeFileSync(getPath(AssetDirectory24, componentName), assetContent24, 'utf8');
-    fs.writeFileSync(getPath(AssetDirectory36, componentName), assetContentNull, 'utf8');
-    // генерируем компоненты
+    fs.writeFileSync(getPath(AssetDirectory36, componentName), assetContent36, 'utf8');
+
+    // генерируем компонент
     fs.writeFileSync(getPath(IconsDirectory, `Icon${componentName}`), componentContent, 'utf8');
 });
 
@@ -64,13 +78,21 @@ const indexExport = names
 
 fs.appendFileSync(IndexPath, indexExport, 'utf8');
 
-// добавляем к маппингу по категориям
-const dataIconFile = fs.readFileSync(IconPath, 'utf8');
-const iconImport = names
-    .map((name) => {
-        return `import { ${name} } from '.${AssetDirectory24.replace(rootPath, '')}/${name}';`;
-    })
-    .join('\n');
-const resultIconFile = iconImport + '\n' + dataIconFile.replace(/\'/g, '');
+// добавляем mapping по категориям
+let dataIconFile = fs.readFileSync(IconPath, 'utf8');
+
+const iconImports = [];
+
+names.forEach((name) => {
+    const regex = new RegExp(`'${name}'`);
+    const iconName = `Icon${name}`;
+
+    // INFO: В файле Icon.tsx заменяем строку типа alarmAddFill: 'AlarmAddFill' -> alarmAddFill: IconAlarmAddFill
+    dataIconFile = dataIconFile.replace(regex, iconName);
+
+    iconImports.push(`import { ${iconName} } from './Icons/${iconName}';`);
+});
+
+const resultIconFile = iconImports.join('\n') + '\n\n' + dataIconFile;
 
 fs.writeFileSync(IconPath, resultIconFile, 'utf8');

packages/plasma-icons/src/old/IconRoot.tsx

@@ -4,10 +4,7 @@ import styled, { css } from 'styled-components';
 const sizeMap = {
     xs: 1, // 16px
     s: 1.5, // 24px
-    // m: 2.25, // 36px
-    // l: 3, // 48px
-    // xl: 3.5, // 56px
-    // xxl: 4, // 64px
+    m: 2.25, // 36px
 };
 
 export type IconSize = keyof typeof sizeMap;

packages/plasma-new-hope/src/components/_Icon/IconRoot.tsx

@@ -47,7 +47,7 @@ export const IconRoot: React.FC<IconRootProps> = ({
     className,
     sizeCustomProperty,
 }) => {
-    const c = color || 'var(--plasma-colors-primary)';
+    const c = color || 'var(--text-primary)';
 
     const w = sizeCustomProperty ? `var(${sizeCustomProperty})` : `${sizeMap[size]}rem`;