How to automate tailwind svg icon conversion for large icon libraries
- Step 1Define your color mapping schema — Create a color-map.json specifying which hex colors map to which Tailwind classes or fill-current. This schema is passed to the batch API for consistent mapping across all icons.
- Step 2Run the batch conversion — POST all SVGs to /api/svg/swap-colors with the color-map schema. The API returns a ZIP with all icons modified to use your Tailwind class mappings.
- Step 3Safelist Tailwind classes — Add dynamically-applied Tailwind classes to safelist in tailwind.config.js: safelist: ['fill-current', 'text-blue-500', 'text-gray-400']. Otherwise JIT may purge them.
Frequently asked questions
How do I safelist dynamic Tailwind icon classes?+
In tailwind.config.js: safelist: [{ pattern: /text-(red|blue|gray|green)-(400|500|600)/ }]. This keeps all color combinations safe from JIT purging.
Can the batch API apply fill-current to all icons uniformly?+
Yes. Pass convert_all_fills_to_current: true in the API request to replace all fill and stroke color attributes with currentColor across every icon in the batch.
Does this work with Heroicons, Lucide, and other icon libraries?+
Those libraries already use currentColor — they're Tailwind-ready out of the box. Use the JAD tool for custom or legacy icon libraries that still use hardcoded hex colors.
How do I handle icons that need two different Tailwind colors?+
Pass a multi-map in the color schema: { '#1a1a2e': 'fill-current', '#4361ee': 'text-blue-500' }. The first color follows parent text; the second is fixed to blue-500.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.