import { useMemo } from "react"

interface IMenuIconProps {
  prefix?: string
  name: string
  color?: string,
  size?: number | string
}
export default function Menuicon(props: IMenuIconProps) {
  const { prefix = 'icon', name, color, size = 16 } = props
  const symbolId = useMemo(() => `#${prefix}-${name}`, [prefix, name])
  return (
    <span className="anticon">
      <svg aria-hidden="true" width={size} height={size} fill={color}  >
        <use href={symbolId} fill={color} />
      </svg>
    </span>
  )
}