@cypress-design/icon-registry v0.42.1

Registry of icons

This package contains the SVG icons and provides a way to load them as HTML elements. This contains all the elements that are not specifically react or vue.

Usage

import {
  /**
   * Array of icons generated by svg-to-ts
   * contains the body of each icon
   */
  iconSet,
  /**
   * Record of each icon with is meta data
   * key: camel case of the rootId (ex: "action-next")
   * value: {
   *  availableSizes: ['16'],
   *  hasFillColor: false,
   *  hasStrokeColor: true,
   *  hasSecondaryFillColor: false,
   *  hasSecondaryStrokeColor: false,
   * }
   */
  iconsMetadata,
  compileIcon,
  getComponentAttributes,
} from '@cypress-design/icon-registry'

iconSet.forEach((icon) => {
  // `icon.name` contains "book-code-x16"
  // since we mostly need the rooId we can extract it from the name
  const [rootId] = icon.name.split('_x')
  // these information sets are intended to be used in a template or a render function
  console.log({
    body: icon.data,
    metaData: icons[rootId],
  })

  const { size, compiledClasses, body } = compileIcon({
    name: rootId,
    size: 16,
    // colors from the tailwind set of colors
    strokeColor: 'red-600',
    fillColor: 'amber-300',
  })
  // size: the size of the icon with the default value if possible,
  // compiledClasses: all css classes that we will hav to add to our SVG element becaus eof the color passed,
  // body: the interior of the SVG element between the opening and closing SVG tags,
})

Build

Generated types

Sample:

// lists all the colors available from windi classes
export type WindiColors = 'jade-200' | 'jade-300' | 'red-200' | 'red-300'

export type IconProps =
  | IconActionDeleteCircleProps
  | IconTestingTypeComponentProps
// | ...

interface IconActionDeleteCircleProps {
  name: 'action-delete-circle'
  color?: keyof typeof colors
}

interface IconTestingTypeComponentProps {
  name: 'testing-type-component'
  size?: 16 | 24 | 64 | 120
  color?: keyof typeof colors
  bgColor?: keyof typeof colors
}

//...