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

export const IconFlag24 = 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="M7.875 1c1.692 0 3.096.564 4.36 1.072l.044.018c1.303.523 2.464.981 3.846.981 1.462 0 2.397-.244 2.943-.464.274-.11.453-.215.555-.283q.076-.052.099-.072l.008-.007a.75.75 0 0 1 1.27.541v12.428a.75.75 0 0 1-.219.53c-.136.136-.315.25-.323.255-.188.126-.46.28-.831.429-.743.298-1.87.572-3.502.572-1.692 0-3.096-.564-4.36-1.072l-.044-.018c-1.303-.523-2.464-.981-3.846-.981-1.462 0-2.397.244-2.943.464a3.4 3.4 0 0 0-.432.207v6.65a.75.75 0 0 1-1.5 0V2.786a.75.75 0 0 1 .219-.53l.103-.093q.08-.068.22-.162c.188-.126.46-.28.831-.429C5.116 1.274 6.243 1 7.875 1m0 1.5c-1.462 0-2.397.244-2.943.464a3.4 3.4 0 0 0-.432.207v10.78c.742-.278 1.834-.522 3.375-.522 1.692 0 3.096.564 4.36 1.072l.044.018c1.303.523 2.464.981 3.846.981 1.462 0 2.397-.245 2.943-.464.186-.074.328-.147.432-.207V4.05c-.742.278-1.834.522-3.375.522-1.692 0-3.096-.564-4.36-1.072l-.044-.018C10.418 2.958 9.257 2.5 7.875 2.5"
                />
            </svg>
        );
    }
);