@hmiproject/helio-sdk
    Preparing search index...

    Function createIcon

    • Creates a HELIO icon.

      Icons should be SVGs and included using import.

      Parameters

      • namespace: Namespace

        Namespace for uniquely addressing this element.

      • options: {
            category: string;
            description?: string;
            Icon: ComponentType<IconComponentProps & SVGProps<SVGSVGElement>>;
            name: string;
        }
        • category: string

          Group name this icon should appear under in the IDE.

        • Optionaldescription?: string

          Optional description text for this icon.

          Will be shown in the IDE icon selector and can be used to improve discoverability through search.

        • Icon: ComponentType<IconComponentProps & SVGProps<SVGSVGElement>>

          The React component rendering the icon.

          To include SVG icons, import them directly.

          import icon from './myIcon.svg'
          
        • name: string

          Human-readable name for this icon.

          Will be shown in the IDE icon selector.

      Returns CreateIconResult

      1.0.0

      import CircleIcon from './Circle.svg';

      const namespace = createNamespace({ name: 'foo.bar' });

      const icon = createIcon(namespace, {
      name: 'Circle',
      description: 'A Roundish Shape',
      category: 'My Extension Icons',
      Icon: CircleIcon,
      });
      import CircleIconS from './CircleS.svg';
      import CircleIconM from './CircleM.svg';
      import CircleIconL from './CircleL.svg';

      const namespace = createNamespace({ name: 'foo.bar' });

      const icon = createIcon(namespace, {
      name: 'Circle',
      description: 'A Roundish Shape',
      category: 'My Extension Icons',
      Icon(props) {
      switch (props.size) {
      case 'S':
      return <CircleIconS />;
      case 'M':
      return <CircleIconM />;
      case 'L':
      return <CircleIconL />;
      }
      },
      });