Internal icons for Clair-design

Usage no npm install needed!

<script type="module">
  import clairIcons from 'https://cdn.skypack.dev/@clair/icons';



Internal icons for Clair-design


Add source file(s)

Move new file(s) to src/svg and run

yarn svg

Preview in browser

yarn dev

Rename existing svg + ts file

There is a chance that the names of existed file(s) might fail to meet your expectation/standard.

To rename both source svg file and ts file, run

yarn rename

This would update the entry file (index.ts) automatically.


yarn build


- src
  - svg
    - <icon>.svg // source file
- icons
  - <icon>.ts // ts file to export
- index.ts // entry point of the library
- app.jsx // for dev only
- .svgo.yml // config for svgo
- svg.config.js // config for yarn svg, also used for svgo


Every icon is written and exported in string format, which will be then be consumed by @clair/vue and @clair/react.