import { forwardRef, useMemo } from 'react';
import { IconProps } from './types';

export const IconKey24 = forwardRef<SVGSVGElement, IconProps>(
    ({ color = 'currentColor', title, ...props }, svgRef) => {
        const titleId = useMemo(
            () =>
                title
                    ? 'title-' + Math.random().toString(36).substr(2, 9)
                    : undefined,
            [title]
        );
        return (
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width={24}
                height={24}
                fill="none"
                viewBox="0 0 24 24"
                aria-hidden={!title}
                ref={svgRef}
                aria-labelledby={titleId}
                {...props}
            >
                {title ? <title id={titleId}>{title}</title> : null}
                <path
                    fill={color}
                    d="M15.328 1c2.049 0 3.98.799 5.429 2.247a7.72 7.72 0 0 1 2.177 6.444l-.001.001a7.73 7.73 0 0 1-3.8 5.642 7.7 7.7 0 0 1-3.812 1.013 7.7 7.7 0 0 1-2.551-.438l-1.04 1.04c-.226.236-.54.37-.865.37H9.601v1.088c-.008.35-.146.676-.383.927l-.007.007a1.36 1.36 0 0 1-.97.408H7.155v1.22c.01.323-.11.63-.33.867l-.945.944a.75.75 0 0 1-.53.22H1.75a.75.75 0 0 1-.75-.75v-3.616c0-.199.08-.39.22-.53l6.869-6.868a7.72 7.72 0 0 1 .572-6.369 7.72 7.72 0 0 1 5.646-3.799c.34-.047.684-.068 1.021-.068m0 1.5q-.415 0-.817.055h-.004a6.22 6.22 0 0 0-4.543 3.057 6.22 6.22 0 0 0-.33 5.464.83.83 0 0 1-.179.915L2.5 18.945V21.5h2.54l.616-.616v-1.6c0-.564.457-1.035 1.034-1.035H8.1v-1.396c0-.564.457-1.035 1.035-1.035h1.604l1.281-1.282a.834.834 0 0 1 .904-.174 6.17 6.17 0 0 0 5.465-.33 6.22 6.22 0 0 0 3.057-4.54 6.22 6.22 0 0 0-1.75-5.184A6.13 6.13 0 0 0 15.327 2.5m.674 2.5a2.999 2.999 0 1 1-2.772 4.148l-.002-.002a2.99 2.99 0 0 1 .653-3.27A2.98 2.98 0 0 1 16.002 5m0 1.5a1.48 1.48 0 0 0-1.062.438v.001a1.49 1.49 0 0 0-.325 1.633 1.497 1.497 0 0 0 2.446.489 1.498 1.498 0 0 0-1.059-2.56"
                />
            </svg>
        );
    }
);