@navinc/base-react-components/src/icons/index.ts

Nav's Pattern Library

import { KebabCase } from 'type-fest'
import { toKebabCase } from '@navinc/utils'

import * as actions from './actions/index.js'
import * as buildings from './buildings/index.js'
import * as business from './business/index.js'
import * as data from './data/index.js'
import * as feedback from './feedback/index.js'
import * as financing from './financing/index.js'
import * as food from './food/index.js'
import * as medical from './medical/index.js'
import * as people from './people/index.js'
import * as seasons from './seasons/index.js'
import * as system from './system/index.js'
import * as tech from './tech/index.js'

export const iconList = {
  actions,
  buildings,
  business,
  data,
  feedback,
  financing,
  food,
  medical,
  people,
  seasons,
  system,
  tech,
}

// This was valuable in creating this utility: https://dev.to/pffigueiredo/typescript-utility-keyof-nested-object-2pa3
type TwoLevelDeepKeyOf<ObjectType extends object> = {
  [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
    ? `${Key}/${keyof ObjectType[Key] & (string | number)}`
    : never
}[keyof ObjectType & (string | number)]

export type IconImportName = TwoLevelDeepKeyOf<typeof iconList>
export type IconName = KebabCase<IconImportName>

export const iconsMap = Object.entries(iconList).reduce((all, [key, values]) => {
  return {
    ...all,
    ...Object.entries(values).reduce(
      (x, [name, icon]) => ({ ...x, [`${toKebabCase(key)}/${toKebabCase(name)}`]: icon }),
      {}
    ),
  }
}, {}) as Record<IconName, (props: JSX.IntrinsicElements['svg']) => JSX.Element>

export const listOfIcons = Object.entries(iconList)
  .map(([key, values]) => {
    return Object.keys(values).map((value) => {
      return `${key}/${value}` as IconImportName
    })
  })
  .flat()

export default iconList