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} [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, ): React.FC & Subcomponents { let isMounted = false; function mountIcon() { @@ -95,6 +96,7 @@ export function makeIcon