fix(editor): browser emoji size parity

[Alexander6060]

🎫 Resolve RM-15743

Related PR

https://github.com/readmeio/readme/pull/20254

🎯 What does this PR do?

• Normalises emoji icon sizing between Safari and Chromium browsers, particularly in callouts and accordions.
• Adds a reusable Icon-emoji class with Safari-specific scaling while leaving Font Awesome icons unchanged.
• Exports the Icon component publicly and allows it to render without a caller-provided class name.
• Adds test coverage and updates affected snapshots.

🧪 QA tips

• Compare emoji icons in callouts and accordions in Safari and Chrome; their size and alignment should match.
• Confirm Font Awesome icons still render at their existing size and colour.

📸 Screenshot or Loom

Safari Before	Chrome Before

Safari After	Chrome After

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 41dffb91-78ed-44a2-915d-4ec39bb93df1

📥 Commits

Reviewing files that changed from the base of the PR and between 810b2e5 and e04717e.

⛔ Files ignored due to path filters (4)

• __tests__/components/__snapshots__/Accordion.test.tsx.snap is excluded by !**/*.snap
• __tests__/components/__snapshots__/Callout.test.tsx.snap is excluded by !**/*.snap
• __tests__/components/__snapshots__/index.test.ts.snap is excluded by !**/*.snap
• __tests__/regression/__snapshots__/snapshots.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (8)

• __tests__/components/Accordion.test.tsx
• __tests__/components/Callout.test.tsx
• __tests__/components/Icon.test.tsx
• __tests__/components/index.test.ts
• components/Icon/index.tsx
• components/Icon/style.scss
• index.tsx
• styles/components.scss

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• readmeio/ai (manual)
• readmeio/gitto (manual)
• readmeio/markdown (manual)
• readmeio/readme (manual)

---

Walkthrough

The Icon component is now a public package export. Its className prop is optional, and iconColor accepts null. Emoji icons always receive the Icon-emoji class while preserving custom classes. Safari-specific styling scales emoji rendering. Accordion, Callout, Icon, and snapshot tests cover the updated behavior.

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

__tests__/components/Accordion.test.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Error while loading rule '@vitest/unbound-method': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://tseslint.com/typed-linting for enabling linting with type information.
Parser: /node_modules/@typescript-eslint/parser/dist/index.js
Occurred while linting /tests/components/Accordion.test.tsx
at throwError (/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:40:11)
at getParserServices (/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:29:9)
at create (/node_modules/@typescript-eslint/eslint-plugin/dist/rules/unbound-method.js:138:55)
at Object.create (/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:39:20)
at create (/node_modules/@vitest/eslint-plugin/dist/index.cjs:6355:35)
at Object.create (/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:39:20)
at createRuleListeners (/node_modules/eslint/lib/linter/linter.js:895:21)
at /node_modules/eslint/lib/linter/linter.js:1066:110
at Array.forEach ()
at runRules (/node_modules/eslint/lib/linter/linter.js:1003:34)

__tests__/components/Callout.test.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Error while loading rule '@vitest/unbound-method': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://tseslint.com/typed-linting for enabling linting with type information.
Parser: /node_modules/@typescript-eslint/parser/dist/index.js
Occurred while linting /tests/components/Callout.test.tsx
at throwError (/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:40:11)
at getParserServices (/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:29:9)
at create (/node_modules/@typescript-eslint/eslint-plugin/dist/rules/unbound-method.js:138:55)
at Object.create (/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:39:20)
at create (/node_modules/@vitest/eslint-plugin/dist/index.cjs:6355:35)
at Object.create (/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:39:20)
at createRuleListeners (/node_modules/eslint/lib/linter/linter.js:895:21)
at /node_modules/eslint/lib/linter/linter.js:1066:110
at Array.forEach ()
at runRules (/node_modules/eslint/lib/linter/linter.js:1003:34)

__tests__/components/Icon.test.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Error while loading rule '@vitest/unbound-method': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://tseslint.com/typed-linting for enabling linting with type information.
Parser: /node_modules/@typescript-eslint/parser/dist/index.js
Occurred while linting /tests/components/Icon.test.tsx
at throwError (/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:40:11)
at getParserServices (/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:29:9)
at create (/node_modules/@typescript-eslint/eslint-plugin/dist/rules/unbound-method.js:138:55)
at Object.create (/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:39:20)
at create (/node_modules/@vitest/eslint-plugin/dist/index.cjs:6355:35)
at Object.create (/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:39:20)
at createRuleListeners (/node_modules/eslint/lib/linter/linter.js:895:21)
at /node_modules/eslint/lib/linter/linter.js:1066:110
at Array.forEach ()
at runRules (/node_modules/eslint/lib/linter/linter.js:1003:34)

• 1 others

---

_{Comment @coderabbitai help to get the list of available commands.}