@swisper.ai/icons

Echo DS icons as React components. Each icon renders an MUI SvgIcon, so it needs @mui/material and takes SvgIcon props such as fontSize, titleAccess and sx. The package ships no CSS, and single-color icons draw in currentColor, so they follow the surrounding text color.

Boundary

Code belongs here if it is an icon: an SVG in the Echo DS set, turned into a React component at build time. Components that place icons (buttons, menus, cards) belong in @swisper.ai/ui and the other component packages; icon sizes in an MUI theme belong in @swisper.ai/design-system.

Install

npm install @swisper.ai/icons

| Peer | Range | Why | | --------------- | ---------- | ------------------------------------------------------------------------------ | | react | >=18.0.0 | Every icon is a React component | | @mui/material | >=7.0.0 | Every icon renders SvgIcon. MUI needs @emotion/react and @emotion/styled |

@inline-svg-unique-id/react is a dependency: icons with clip paths or gradients (the flags, for example) use it to give each rendered copy its own SVG ids.

Setup

1. Install @mui/material, @emotion/react and @emotion/styled if the app doesn't have them.
2. Render an icon:

import { SearchIcon } from '@swisper.ai/icons';

<SearchIcon fontSize="small" titleAccess="Search" />;

Browse and search the full set in the Echo DS Storybook.

API

| Export | Why it exists | | ------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | <Name>Icon | One named export per icon (AddIcon, CloseIcon, SearchIcon, FlagFranceIcon, …), each an MUI SvgIcon with the icon's view box. |

The package exports no props types; use SvgIconProps from @mui/material/SvgIcon.

Sizing

Without a theme, MUI sizes icons with font-size (24px for medium). The MUI theme in @swisper.ai/design-system/mui-theme sets width and height instead: 20px small, 24px medium, 35px large, and the full size of the parent for inherit.

Troubleshooting

| Symptom | Cause | Fix | | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | "Invalid hook call", or a context is missing | The app resolves two copies of React | Add resolve: { dedupe: ['react', 'react-dom'] } to the Vite config | | Styles are missing or doubled, or the MUI theme doesn't apply | The app resolves two copies of @emotion/react or @mui/material | Add them to resolve.dedupe in the Vite config, next to react and react-dom | | ERR_UNSUPPORTED_DIR_IMPORT when a test imports the package | dist/ uses extensionless imports that only a bundler resolves, and Vitest externalizes it | Set server.deps.inline: [/@swisper\.ai\//] in the Vitest config | | Cannot find module '@mui/material/SvgIcon' | @mui/material isn't installed | npm install @mui/material @emotion/react @emotion/styled | | A Tailwind size-* class on an icon has no effect | MUI's SvgIcon styles set the size, and they load after the app's stylesheet | Use fontSize="inherit" and size the parent, or mark the class important: size-[18px]! | | An icon ignores color or the text color | Multi-color icons, such as flags and brand logos, keep their own fills | Pick a single-color icon, or leave it in its own colors | | Screen readers skip the icon | SvgIcon is aria-hidden unless it has a title | Pass titleAccess when the icon carries meaning on its own | | An import clashes with another icon set (SearchIcon is already declared) | MUI's icon packages use the same <Name>Icon naming | Rename on import: import { SearchIcon as EchoSearchIcon } from '@swisper.ai/icons' |

License

Apache-2.0