[Feature Request]: A way to get the types for the provided icon collections

[AbdallahAlhaddad]

I think it would be very helpful if we can import the types of available icons to use to build a wrapper component which contains more logic to it.

<script setup lang="ts">
const props = defineProps<{
  /**
   * Available `Iconify` icons
   */
  name: string // 👈 Need a type to get autocomplete for provided collections icon names
   
   //.....
}>()

</script>
<template>
  <span :class="name"></span>
</template>

[github-actions]

🎉 This issue has been resolved in version 1.1.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[chojnicki]

@egoist was this 1.1.3 release really related to this issue? If I understand correctly, @AbdallahAlhaddad was asking about type for icons names, not collections names. This is exactly what I'm trying to achieve. I have button component that has optional icon prop for icon name (icon class to be precise), and I also have this as string type, which is fine but not perfect. It would be great if I could somehow get type for my whole collection for warnings when name is wrong and autocomplete functionality.

For example
'i-solar-case-round-linear' | 'i-solar-scooter-linear' etc

[chojnicki]

I quickly made this as a "temporary" (wink wink) solution:

import fs from 'node:fs'
import { icons } from '@iconify-json/solar'

const names = Object.keys(icons.icons)

let result = 'declare global {\n'
result += '  type IconClass =\n'
names.forEach((name) => {
  result += `    | 'i-solar-${name}'\n`
})
result += '}\n'
result += 'export {}\n'

fs.writeFileSync('./icons.d.ts', result)

console.log('icons.d.ts has been successfully generated.')

So I'm simply generating types file. Again - not ideal, but it will be probably generated just once anyway so it's good enough. Of course this code will work for single collection (this is what I needed).

EDIT: Warning. If you have tailwind configured to parse all .ts files in, exporting file to .d.ts will cause Tailwind to parse it too, which will lead to every icon being bundled in .css! Change pattern to fix it.

[chojnicki]

Updated version for multiple collections:

import fs from 'node:fs'
import { getIconCollections } from '@egoist/tailwindcss-icons'

const collections = getIconCollections([
  'fa6-brands',
  'solar',
])

let result = 'declare global {\n'
result += '  type IconClass =\n'

Object.values(collections).forEach((collection) => {
  Object.keys(collection.icons).forEach((name) => {
    result += `    | 'i-${collection.prefix}-${name}'\n`
  })
})

result += '}\n'
result += 'export {}\n'

fs.writeFileSync('./icons.d.ts', result)

console.log('icons.d.ts has been successfully generated.')

Result:

declare global {
  type IconClass =
    | 'i-fa6-brands-42-group'
    | 'i-fa6-brands-500px'
    | 'i-fa6-brands-accessible-icon'
    | 'i-fa6-brands-accusoft'
    | 'i-fa6-brands-adn'
    | 'i-fa6-brands-adversal'
    | 'i-fa6-brands-affiliatetheme'
    | 'i-fa6-brands-airbnb'
    | 'i-fa6-brands-algolia'
    | 'i-fa6-brands-alipay'
    | 'i-fa6-brands-amazon'
    | 'i-fa6-brands-amazon-pay'
    | 'i-fa6-brands-amilia'
    | 'i-fa6-brands-android'
    | 'i-fa6-brands-angellist'
   // and so on....
}
export {}

I have this as global, but it can be changed to export type.

EDIT: Warning. If you have tailwind configured to parse all .ts files in, exporting file to .d.ts will cause Tailwind to parse it too, which will lead to every icon being bundled in .css! Change pattern to fix it.

[hyoban]

@chojnicki Thanks for your tip. I just updated README to link this issue.