fix: provide symbol attributes to svg root container

VKCOM · Jul 31, 2024 · e425b52 · e425b52
1 parent ae19310
commit e425b52
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}