[Suggestion] json file export tool by name icon #372
Description
First of all, thank you for creating this tool. I have been using this package for a few years and I love it.
Recently I have been using it in next.js applications and there is a flickering phenomenon because the way these icons work is using the network and connecting via your server's API.
So I changed the mechanism to offline instead of online and did not want to change too much in my current code (300 files import icons)
and I used :
addCollection({
...iconSet,
width: iconSet.width || 24,
height: iconSet.height || 24,
})To get the icons to use. But this requires us to install related packages like:
- @iconify-json/simple-icons
- @iconify-json/heroicons
...
Because I don't want to install additional packages, I created my own .json file (carbon.json, eva.json,...) and imported it to use. The problem is that there are about 200 icons that need to be used in my project. So it is very difficult to manage.
Example:
{
"prefix": "carbon",
"width": 32,
"height": 32,
"icons": {
"chevron-sort": {
"body": "<path fill=\"currentColor\" d=\"m16 28l-7-7l1.41-1.41L16 25.17l5.59-5.58L23 21zm0-24l7 7l-1.41 1.41L16 6.83l-5.59 5.58L9 11z\"/>"
},
"zoom-in": {
"body": "<path fill=\"currentColor\" d=\"M18 12h-4V8h-2v4H8v2h4v4h2v-4h4z\"/><path fill=\"currentColor\" d=\"M21.448 20A10.86 10.86 0 0 0 24 13a11 11 0 1 0-11 11a10.86 10.86 0 0 0 7-2.552L27.586 29L29 27.586ZM13 22a9 9 0 1 1 9-9a9.01 9.01 0 0 1-9 9\"/>"
},
"zoom-out": {
"body": "<path fill=\"currentColor\" d=\"M8 12h10v2H8z\"/><path fill=\"currentColor\" d=\"M21.448 20A10.86 10.86 0 0 0 24 13a11 11 0 1 0-11 11a10.86 10.86 0 0 0 7-2.552L27.586 29L29 27.586ZM13 22a9 9 0 1 1 9-9a9.01 9.01 0 0 1-9 9\"/>"
},
...
}
}
Suggestion
Can we create online tool to export icons?
Example:
Input:
carbon:chevron-sort, carbon: zoom-in, eva: tv-fill, eva:cube-fillOutput:
[
{
"prefix": "carbon",
"width": 32,
"height": 32,
"icons": {
"chevron-sort": {
"body": "<path fill=\"currentColor\" d=\"m16 28l-7-7l1.41-1.41L16 25.17l5.59-5.58L23 21zm0-24l7 7l-1.41 1.41L16 6.83l-5.59 5.58L9 11z\"/>"
},
"zoom-in": {
"body": "<path fill=\"currentColor\" d=\"M18 12h-4V8h-2v4H8v2h4v4h2v-4h4z\"/><path fill=\"currentColor\" d=\"M21.448 20A10.86 10.86 0 0 0 24 13a11 11 0 1 0-11 11a10.86 10.86 0 0 0 7-2.552L27.586 29L29 27.586ZM13 22a9 9 0 1 1 9-9a9.01 9.01 0 0 1-9 9\"/>"
}
}
},
{
"prefix": "eva",
"width": 24,
"height": 24,
"icons": {
"tv-fill": {
"body": "<path fill=\"currentColor\" d=\"M18 6h-3.59l2.3-2.29a1 1 0 1 0-1.42-1.42L12 5.59l-3.29-3.3a1 1 0 1 0-1.42 1.42L9.59 6H6a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3m1 13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1Z\"/>"
},
"cube-fill": {
"body": "<path fill=\"currentColor\" d=\"M11.25 11.83L3 8.36v7.73a1.69 1.69 0 0 0 1 1.52L11.19 21h.06ZM12 10.5l8.51-3.57a1.6 1.6 0 0 0-.51-.38l-7.2-3.37a1.87 1.87 0 0 0-1.6 0L4 6.55a1.6 1.6 0 0 0-.51.38Zm.75 1.33V21h.05l7.2-3.39a1.69 1.69 0 0 0 1-1.51V8.36Z\"/>"
}
}
}
]This way I only need to manage the icon name.
Waiting for your response. Thanks!