| 1 | > **Warning** |
| 2 | > |
| 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 4 | > |
| 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/icons.md](../../packages/mermaid/src/docs/config/icons.md). |
| 6 | |
| 7 | # Registering icon pack in mermaid |
| 8 | |
| 9 | The icon packs available can be found at [icones.js.org](https://icones.js.org/). |
| 10 | We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram. |
| 11 | |
| 12 | Using JSON file directly from CDN: |
| 13 | |
| 14 | ```js |
| 15 | import mermaid from 'CDN/mermaid.esm.mjs'; |
| 16 | mermaid.registerIconPacks([ |
| 17 | { |
| 18 | name: 'logos', |
| 19 | loader: () => |
| 20 | fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), |
| 21 | }, |
| 22 | ]); |
| 23 | ``` |
| 24 | |
| 25 | Using packages and a bundler: |
| 26 | |
| 27 | ```bash |
| 28 | npm install @iconify-json/logos@1 |
| 29 | ``` |
| 30 | |
| 31 | With lazy loading |
| 32 | |
| 33 | ```js |
| 34 | import mermaid from 'mermaid'; |
| 35 | |
| 36 | mermaid.registerIconPacks([ |
| 37 | { |
| 38 | name: 'logos', |
| 39 | loader: () => import('@iconify-json/logos').then((module) => module.icons), |
| 40 | }, |
| 41 | ]); |
| 42 | ``` |
| 43 | |
| 44 | Without lazy loading |
| 45 | |
| 46 | ```js |
| 47 | import mermaid from 'mermaid'; |
| 48 | import { icons } from '@iconify-json/logos'; |
| 49 | mermaid.registerIconPacks([ |
| 50 | { |
| 51 | name: icons.prefix, // To use the prefix defined in the icon pack |
| 52 | icons, |
| 53 | }, |
| 54 | ]); |
| 55 | ``` |
| 56 | |