From 5f1beda867537506abb451b0de29b2b650e9040d Mon Sep 17 00:00:00 2001
From: Egor Pronin <42776347+MrZillaGold@users.noreply.github.com>
Date: Thu, 1 Aug 2024 19:35:05 +0900
Subject: [PATCH] fix: provide symbol attributes to svg root container (#953)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Пробрасываем нужные атрибуты для корректного отображения иконки с symbol-элемента на svg элемент, который ссылается на symbol.
- preserveAspectRatio
---
 packages/icons-scripts/scripts/icons-map.js    | 8 ++++++++
 packages/icons-scripts/scripts/icons.js        | 2 ++
 packages/icons-scripts/scripts/output/react.js | 2 ++
 packages/icons-sprite/src/SvgIcon.tsx          | 2 ++
 4 files changed, 14 insertions(+)

diff --git a/packages/icons-scripts/scripts/icons-map.js b/packages/icons-scripts/scripts/icons-map.js
index 2ab064dc..0508586d 100644
--- a/packages/icons-scripts/scripts/icons-map.js
+++ b/packages/icons-scripts/scripts/icons-map.js
@@ -15,6 +15,7 @@ const { dashToCamel, sortArrayAlphabetically, longestCommonPrefix } = require('.
  * @property {string} componentName
  * @property {string} content
  * @property {Icon[]} subcomponents
+ * @property {Record<string, string>} [attrs]
  * @property {boolean} [isSubcomponent]
  */
 
@@ -211,6 +212,12 @@ async function prepareIconMapEntity(compiler, icon, optimizeFn) {
   const symbol = await compiler.addSymbol({ content, id: icon.filename, path: '' });
 
   const viewBox = symbol.viewBox;
+  // Список поддерживаемых аттрибутов, которые дублируются с symbol-элемента на svg-элемент, который ссылается на symbol
+  const attrs = Object.fromEntries(
+    Object.entries({
+      preserveAspectRatio: symbol.tree[0]?.attrs.preserveAspectRatio,
+    }).filter(([, value]) => value !== undefined),
+  );
   const width = viewBox.split(' ')[2];
   const height = viewBox.split(' ')[3];
 
@@ -220,6 +227,7 @@ async function prepareIconMapEntity(compiler, icon, optimizeFn) {
     height,
     content,
     viewBox,
+    attrs: Object.keys(attrs).length ? attrs : undefined,
     subcomponents,
     symbolId: symbol.id,
     symbol: symbol.render(),
diff --git a/packages/icons-scripts/scripts/icons.js b/packages/icons-scripts/scripts/icons.js
index afb917c0..af6314be 100644
--- a/packages/icons-scripts/scripts/icons.js
+++ b/packages/icons-scripts/scripts/icons.js
@@ -118,6 +118,7 @@ function generateIcons(options) {
       height,
       dirname,
       size,
+      attrs,
       subcomponents,
       isSubcomponent,
     } = icon;
@@ -127,6 +128,7 @@ function generateIcons(options) {
     // Превращаем svg-файл в ts-файл в виде строки
     const reactSource = createReactIcon({
       id: symbolId,
+      attrs,
       width,
       height,
       viewBox,
diff --git a/packages/icons-scripts/scripts/output/react.js b/packages/icons-scripts/scripts/output/react.js
index f0736366..e71e0d8c 100644
--- a/packages/icons-scripts/scripts/output/react.js
+++ b/packages/icons-scripts/scripts/output/react.js
@@ -2,6 +2,7 @@ const { dashToCamel } = require('../utils');
 
 function createReactIcon({
   id,
+  attrs,
   width,
   height,
   viewBox,
@@ -52,6 +53,7 @@ export const ${componentName} = makeIcon<${componentName}Props, ${typeAssigns}>(
   ${height},
   ${!!deprecated},
   ${replacement ? `'${replacement}'` : undefined}
+  ${attrs ? `, ${JSON.stringify(attrs)}` : ''}
 );
 ${assigns}
 `;
diff --git a/packages/icons-sprite/src/SvgIcon.tsx b/packages/icons-sprite/src/SvgIcon.tsx
index eeb7d802..62f07e5c 100644
--- a/packages/icons-sprite/src/SvgIcon.tsx
+++ b/packages/icons-sprite/src/SvgIcon.tsx
@@ -74,6 +74,7 @@ export function makeIcon<Props extends SvgIconProps = SvgIconProps, Subcomponent
   height: number,
   deprecated?: boolean,
   replacement?: string,
+  attrs?: Record<string, string>,
 ): React.FC<Props> & Subcomponents {
   let isMounted = false;
   function mountIcon() {
@@ -95,6 +96,7 @@ export function makeIcon<Props extends SvgIconProps = SvgIconProps, Subcomponent
 
     return (
       <SvgIcon
+        {...attrs}
         {...props}
         viewBox={viewBox}
         id={id}