How do I use Lord Icons on React application

user_11512006 0
Viewed 192

In Lord Icons documentation, it doesn't provides the support for using the Icons in the application. I have used following two npm packages lottie-web, lord-icon-element.

I am using typescript in my react application.

When i declare the lord icon

<lord-icon></lord-icon>

It gives me the error that the property lord-icon does not exist on type 'JSX.Instrinsic Elements'. It seems that we need to define the tag using Pascal Case . But this doesn't seems to work either.

What can i do to make this work?

lottie typescript reactjs
1 Answers

$ npm install lord-icon-element lottie-web

types.ts

import 'react';

type LordIconTrigger =
  | 'hover'
  | 'click'
  | 'loop'
  | 'loop-on-hover'
  | 'morph'
  | 'morph-two-way';

type LordIconProps = {
  src?: string;
  trigger?: LordIconTrigger;
  colors?: string;
  delay?: string | number;
};

type LordIconElement = React.DetailedHTMLProps<
  React.HTMLAttributes<HTMLElement>,
  HTMLElement
> &
  LordIconProps;

declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace JSX {
    interface IntrinsicElements {
      'lord-icon': LordIconElement;
    }
  }
}

lord-icon.tsx

import React from 'react';
import lottie from 'lottie-web';
import {defineLordIconElement} from 'lord-icon-element';

// register lottie and define custom element
defineLordIconElement(lottie.loadAnimation);

export type LordIconTrigger =
  | 'hover'
  | 'click'
  | 'loop'
  | 'loop-on-hover'
  | 'morph'
  | 'morph-two-way';

export type LordIconColors = {
  primary?: string;
  secondary?: string;
};

export type LordIconProps = {
  src?: string;
  trigger?: LordIconTrigger;
  colors?: LordIconColors;
  delay?: number;
  size?: number;
};

export const LordIcon = ({
  colors,
  src,
  size,
  trigger,
  delay,
}: LordIconProps) => {
  return (
    <lord-icon
      colors={`primary:${colors?.primary},secondary:${colors?.secondary}`}
      src={src}
      trigger={trigger}
      delay={delay}
      style={{
        width: size,
        height: size,
      }}
    />
  );
};

index.html

<LordIcon
    src="https://cdn.lordicon.com/wurbjznp.json"
    trigger="morph"
    colors={{primary: '#f53924'}}
    size={24}
/>
user_48267270
Related