[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[bot]]

:tada: This issue has been resolved in version 1.1.3 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[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('./src/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).

[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('./src/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.

[hyoban]

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