feat(logos): 🎸 SVG to React Component converter

[punkbit]

Why?

Introducing logos in the library is a manual process which is prone to mistakes and relies on developer time. Furthermore, originally, it lacked documentation, which caused further confusion and wasted time due to context switching; Although the documentation was introduced recently, there's still space for improvement.

To help improve collaboration with the design team, an SVG to React Component workflow is offered to enable anyone to contribute as easily and quickly as possible. Including documentation, providing information on topics, such as further customisation for theme-based computed logos, e.g. light VS dark.

While this helps standardise the introduction of logos consistently, there's still space for improvement, e.g. there are two separate registries for light and dark logos and icons introduction, which are similar SVG data types, and are still a manual process. These and others will be addressed separately in the next iterations.

💡 To test, store an SVG icon locally, e.g. https://www.svgrepo.com/svg/530216/carrot
💡 Relates to #829

How?

• Create a reusable process, as nodejs script that leverages React SVGR CLI to compute
• Provides further processing, handling the file generation items alphabetically
• Generates TypeScript types automatically, e.g. keeping current and introducing new component type
• Extends the documentation with a new guide, e.g. converting SVG to React components; but also a TLDR/quick guide
• Attemptively, modified all existing logos to use a custom type to allow extension, e.g. theme awareness
• Provide instructions to handle logo style customisation, e.g. light VS dark mode

Preview?

On generate output

Practical demo (low res)

demo-convert-svg-to-react-component-intial-version.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
click-ui	Ready	Preview, Comment	Feb 13, 2026 3:57pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 52ca3f5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[DreaminDani]

So, is this only for logos for now? Or does it include the ability to add flags? What about icons?