Repository navigation
feat(react-icons): add localized icon variants - #1261
Merged
Martin Hochel (Hotell) merged 7 commits intoOct 22, 2026
Merged
Conversation
Generate explicit locale exports and separate SVG, headless, and font atoms, while preserving existing exports and glyph codepoints. Cover localized imports in transforms, lint rules, subsetting, and browser rendering. Keep generator tests and type checking under importer ownership. Refs microsoft#1258
Generate a compact list of sized system-icon exports without a resizable counterpart and skip invalid named and namespace suggestions. Keep brand/custom sources unchanged and exhaustively verify system-icon targets against metadata. Document the availability-check scope.
Exclude system Light variants from resizable suggestions while retaining locale-aware classification and suffix-preserving replacements. Regenerate non-Light exceptions and cover localized Light imports, catalogue invariants, and unchanged brand/custom behavior.
Resolve conflicts against upstream 1.1.343 and retain its per-export atomization and async font subsetting behavior. Preserve published codepoints, reassign only colliding unreleased locale glyphs, and regenerate fonts, React metadata, and snapshots. Verify locale selectors, all relevant integrations, and zero named-import JS/CSS growth against a freshly built current-main baseline.
📋 PR Validation SummaryCheck the Build react library job summary for detailed reports:
|
Contributor
There was a problem hiding this comment.
🔵 Needs a closer look
It changes shared generation, generated font artifacts, bundler integrations, and lint behavior across multiple packages and requires final human validation.
0 open findings
What changed in this PR
Adds source-backed localized React icon variants across SVG, sprite, headless, and font APIs while preserving existing exports and codepoints.
Changes:
- Introduces shared locale-aware icon naming, discovery, grouping, and RTL handling.
- Extends fonts, transforms, subsetting, metadata, and lint suggestions for localized exports.
- Adds integration tests, bundle checks, and consumer documentation.
| File | Description |
|---|---|
yarn.lock |
Locks font inspection dependencies. |
packages/react-icons/scripts/per-icon.writer.js |
Groups locale-qualified atoms. |
packages/react-icons/scripts/deprecated-atoms.js |
Handles qualified export names. |
packages/react-icons/scripts/convert.utils.test.js |
Tests localized SVG discovery. |
packages/react-icons/scripts/convert.utils.js |
Generates localized SVG exports. |
packages/react-icons/scripts/convert.js |
Uses recursive source discovery. |
packages/react-icons/scripts/convert-font.utils.test.js |
Tests localized font atoms. |
packages/react-icons/scripts/convert-font.utils.js |
Generates localized font exports. |
packages/react-icons/scripts/convert-font.js |
Applies locale-aware RTL metadata. |
packages/react-icons/scripts/check-localized-bundle-size.js |
Adds named-import size regression checks. |
packages/react-icons/README.md |
Documents localized icon APIs. |
packages/react-icons/project.json |
Adds inputs and bundle-size target. |
packages/react-icons/package.json |
Exposes the bundle-size script. |
packages/react-icons/fluent-icons-transform.cjs |
Resolves localized atomic imports. |
packages/react-icons/docs/build-transforms.md |
Documents transform mappings. |
packages/react-icons/build-verify.test.js |
Updates generated-output verification. |
packages/react-icons/build-transforms.test.js |
Tests localized transform paths. |
packages/react-icons-svg-sprite-subsetting-webpack-plugin/test/webpack.config.js |
Verifies localized sprite subsetting. |
packages/react-icons-svg-sprite-subsetting-webpack-plugin/test/src/merged.js |
Adds merged localized fixtures. |
packages/react-icons-svg-sprite-subsetting-webpack-plugin/test/src/atomic.js |
Adds atomic localized fixtures. |
packages/react-icons-svg-sprite-subsetting-webpack-plugin/test/__mock__/react-icons/lib/atoms/svg-sprite/text-bold_sr-cyrl.svg |
Adds Serbian sprite fixture. |
packages/react-icons-svg-sprite-subsetting-webpack-plugin/test/__mock__/react-icons/lib/atoms/svg-sprite/text-bold_sr-cyrl.js |
Adds Serbian sprite module. |
packages/react-icons-svg-sprite-subsetting-webpack-plugin/test/__mock__/react-icons/lib/atoms/svg-sprite/text-bold_es.svg |
Adds Spanish sprite fixture. |
packages/react-icons-svg-sprite-subsetting-webpack-plugin/test/__mock__/react-icons/lib/atoms/svg-sprite/text-bold_es.js |
Adds Spanish sprite module. |
packages/react-icons-font-subsetting-webpack-plugin/test/src/localized.js |
Adds localized font entry fixture. |
packages/react-icons-font-subsetting-webpack-plugin/test/make-configs.js |
Validates selected font glyphs. |
packages/react-icons-font-subsetting-webpack-plugin/test/check-localized-font-render.js |
Adds browser rendering checks. |
packages/react-icons-font-subsetting-webpack-plugin/README.md |
Documents rendering validation. |
packages/react-icons-font-subsetting-webpack-plugin/project.json |
Adds rendering test target. |
packages/react-icons-font-subsetting-webpack-plugin/package.json |
Adds rendering test script. |
packages/react-icons-atomic-webpack-loader/test/transform.test.ts |
Tests localized import rewrites. |
packages/react-icons-atomic-webpack-loader/test/selector-protocol.test.ts |
Tests localized selector families. |
packages/react-icons-atomic-webpack-loader/src/selector-protocol.ts |
Maps qualified export families. |
packages/react-icons-atomic-webpack-loader/src/modules.ts |
Recognizes localized icon names. |
packages/eslint-plugin-react-icons/src/rules/prefer-resizable/sized-icons.ts |
Preserves locale-aware suggestions. |
packages/eslint-plugin-react-icons/src/rules/prefer-resizable/sized-icons.test.ts |
Tests valid localized counterparts. |
packages/eslint-plugin-react-icons/src/rules/prefer-resizable/index.ts |
Tracks each import source. |
packages/eslint-plugin-react-icons/src/rules/prefer-resizable/index.test.ts |
Covers localized lint behavior. |
packages/eslint-plugin-react-icons/src/rules/prefer-resizable/icon-sizes.generated.ts |
Records missing resizable counterparts. |
packages/eslint-plugin-react-icons/scripts/generate-icon-sizes.mjs |
Generates locale-aware availability data. |
packages/eslint-plugin-react-icons/docs/rules/prefer-resizable.md |
Documents suggestion policies. |
packages/docsite/stories/Icons/IconsAtomicAPI.mdx |
Documents localized atom groups. |
package.json |
Adds fontkit test dependencies. |
nx.json |
Tracks the naming utility as input. |
importer/tsconfig.utils.json |
Type-checks importer utilities. |
importer/project.json |
Adds importer test configuration. |
importer/package.json |
Adds importer tests and type-checking. |
importer/icon-name.test.js |
Tests naming and mirroring rules. |
importer/icon-name.js |
Centralizes qualified icon naming. |
importer/generateFont.test.js |
Verifies localized font generation. |
importer/generateFont.js |
Includes localized glyph sources. |
fonts/FluentSystemIcons-Resizable.json |
Adds resizable localized codepoints. |
fonts/FluentSystemIcons-Resizable.css |
Exposes localized resizable glyphs. |
fonts/FluentSystemIcons-Regular.json |
Adds regular localized codepoints. |
fonts/FluentSystemIcons-Light.json |
Adds localized light codepoint. |
fonts/FluentSystemIcons-Light.html |
Updates the light-font preview. |
fonts/FluentSystemIcons-Light.css |
Exposes the localized light glyph. |
fonts/FluentSystemIcons-Filled.json |
Adds filled localized codepoints. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Retain upstream dependency upgrades, CODEOWNERS cleanup, and the file-type icon catalogue while preserving localized icon tooling and font assertions. Resolve the root manifest/lockfile entries and validate localized inline sprite checks in the upstream HTML beforeEmit hook.
Victor Genaev (mainframev)
approved these changes
Oct 19, 2026
Vi Nguyen (vinguyen12)
approved these changes
Oct 21, 2026
Vi Nguyen (vinguyen12)
left a comment
Vi Nguyen (vinguyen12)
left a comment
There was a problem hiding this comment.
Signed off from Outlook local testing. Thanks for supporting this and also the quick turn around, Martin!
…t-icons # Conflicts: # fonts/FluentSystemIcons-Filled.css # fonts/FluentSystemIcons-Filled.json # fonts/FluentSystemIcons-Filled.ttf # fonts/FluentSystemIcons-Filled.woff # fonts/FluentSystemIcons-Filled.woff2 # fonts/FluentSystemIcons-Regular.css # fonts/FluentSystemIcons-Regular.json # fonts/FluentSystemIcons-Regular.ttf # fonts/FluentSystemIcons-Regular.woff # fonts/FluentSystemIcons-Regular.woff2 # fonts/FluentSystemIcons-Resizable.css # fonts/FluentSystemIcons-Resizable.json # fonts/FluentSystemIcons-Resizable.ttf # fonts/FluentSystemIcons-Resizable.woff # fonts/FluentSystemIcons-Resizable.woff2 # importer/package.json # packages/eslint-plugin-react-icons/docs/rules/prefer-resizable.md # packages/eslint-plugin-react-icons/scripts/generate-icon-sizes.mjs # packages/eslint-plugin-react-icons/src/rules/prefer-resizable/icon-sizes.generated.ts # packages/eslint-plugin-react-icons/src/rules/prefer-resizable/index.test.ts # packages/eslint-plugin-react-icons/src/rules/prefer-resizable/sized-icons.test.ts # packages/eslint-plugin-react-icons/src/rules/prefer-resizable/sized-icons.ts # packages/react-icons/build-verify.test.js
- reuse lodash camelCase/kebabCase in importer/icon-name.js - share ICON_SUFFIX_REGEX between atomic loader modules - scope icon-name.js to the font generation Nx input - move contributor bundle-size instructions into the script header - condense localized-icon docs in README and docsite Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Human Reviewer Focus
Most of this PR's size comes from regenerated artifacts. Please prioritize these four areas:
fonts/output is regenerated, including CSS/HTML previews, TTF/WOFF/WOFF2 binaries, and all codepoint maps. The maps contain the entire glyph catalogue, not just the localized additions. Review the generation logic and preservation of published codepoint assignments; the large font/artifact diff is generated output.TextBoldRegular_srCyrltotext-bold_sr-cyrl, including per-export selector mode.Summary
Add explicit, source-backed localized icon exports across SVG, headless SVG, fonts, and headless fonts without runtime locale selection.
_srCyrl→_sr-cyrl).Related Work
Addresses #1258.
The baseline
prefer-resizablecorrection is being reviewed separately in #1260. This branch also includes its locale-aware adaptation: only suggest existing system-icon counterparts, preserve locale suffixes, and exclude Light variants by design. The generated non-Light exception list contains 236 entries on this branch. Brand/custom-source behavior remains unchanged.Validation
Notes
Only source-backed locale variants are exported. Full fonts and whole-library imports grow intentionally; use font subsetting to ship only consumed glyphs. No runtime locale detection or automatic selection between distinct directional artwork is introduced.