Bluetti Icons

Dependencies

• svgo: short for SVG Optimizer, is a Node.js library and command-line application for optimizing SVG files.
• svgr: SVGR is an universal tool to transform SVG into React components.

How Can I Add A SVG-Component

• Rename your .svg file using upper camelCase and make sure it is in XXXOutlined || XXXFilled || XXXColorful format.
• Recreate the /svg folder and put the .svg file in it.(make sure you have delete /svgicons/ and /svgr/ folder).
• Run script npm run opsvg || pnpm opsvg || yarn run opsvg
• You will find your icons in the /src/components/svgicons folder. Verify and move them to /src/iconsv2/....
• Remember to delete the *.svg of the /svg and svgrz.
• If necessary you can run npm run fixsvgids to replace the ids in the svg-component.
• You can run npm run dev start project and preview your icon in localhost:5173

Project

Main project structure

bluetti-icons
    ├── src/
    │   ├── iconsv2/
    │   │   ├── outlined/
    │   │   │   ├── basic/
    │   │   │   │   └── index.ts
    │   │   │   ├── xxx/
    │   │   │   │   └── index.ts
    |   |   |   └── index.ts
    │   │   ├── filled/
    │   │   │   ├── basic/
    │   │   │   │   └── index.ts
    │   │   │   ├── xxx/
    │   │   │   │   └── index.ts
    │   │   |   └── index.ts
    │   │   └── index.ts             ← Each folder needs an index entry
    │   ├── pages/
    |   |   ├── playground.css
    |   |   └── playground.tsx       ← Review Page File
    |   ├── index.tsx
    |   └── main.tsx
    ├── svg/
    ├── scripts/                     ← your script
    ├── index.html