Example tsdoc vscode typescript react

tsdoc.tsx

import React from 'react';
import styled from 'styled-components';
import { ColorsType } from 'Theme/colors';
import { icons, NameIconType } from './icons';

/**
 * Define Props for Icon component
 */
type IconProps = {
   /**
    * Name of an Icon keep from {@link Icon/icons.tsx}
    */
   name: NameIconType;

   /**
    * A string wich contain a number and the unit size
    * e.g `'2vw'` `'5px'` etc.
    */
   size: string;

   /**
    * A color keep from {@link Theme/colors}
    */
   color: keyof ColorsType;

   /**
    * @remarks
    * optional
    *
    * A color keep from {@link Theme/colors}
    */
   hover?: keyof ColorsType;
};

/**
 * Style Icon
 * @param size  width css property
 * @param color  color css property
 * @param [hover] color css propterty:hover
 * @return Styled component [svg]
 */
const SIcon = styled.svg<Omit<IconProps, 'name'>>`
   transition: color 0.5s ease-in-out;
   width: ${(props) => props.size};
   color: ${(props) => props.theme.colors?.[props.color]};
   &:hover {
      color: ${(props) => props.hover && props.theme.colors?.[props.hover]};
   }
`;

/**
 *
 * Component Icon
 * @param name - Icon's name
 * @param size - icon's size [vw, px, %]
 * @param  color - Icon's color [Restricted to theme colors]
 * @param  [hover] - [optional] Icon's color hover [Restricted to theme colors]
 * @return  React.ReactNode
 * @remarks
 *  Example of usage
 * ```ts
 *  <Icon name="about" size="2vw" color="about" hover="active"/>
 * ```
 */
const Icon = ({ size, color, hover, name }: IconProps) => {
   return (
      <SIcon
         size={size}
         color={color}
         hover={hover}
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
      >
         <title>{icons[name].title}</title>
         {icons[name].svg}
      </SIcon>
   );
};

export { Icon };