import { Icon } from '@iconify/css-solid';
import { splitProps } from 'solid-js';

const viewBox = {"width":36,"height":36};
const content = `<style>.f7n3ibc {
  fill: #ea596e;
  d: path("M9 17v3a3 3 0 1 0 6 0v-3z");
}

.fwz4q-b {
  cx: 12px;
  cy: 14.5px;
  fill: #ea596e;
  rx: 3px;
  ry: 1.5px;
}

.hi7u-ub {
  fill: #dd2e44;
  d: path("M9 16h3v3H9z");
}

.of0zm-dq {
  fill: #c60a1d;
  d: path("M36 27a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z");
}

.oscx8eb {
  cx: 12px;
  cy: 13.75px;
  fill: #ffac33;
  rx: 3px;
  ry: .75px;
}

.r6et9tf {
  fill: #99aab5;
  d: path("M7 16h1v7H7zm9 0h1v7h-1z");
}

.vkrbpbi {
  fill: #ffc400;
  d: path("M0 12h36v12H0z");
}

.w-6g-lb {
  fill: #66757f;
  d: path("M6 22h3v1H6zm9 0h3v1h-3zm-8-7h1v1H7zm9 0h1v1h-1z");
}

.y6q_qfu {
  fill: #f4a2b2;
  d: path("M12 16h3v3h-3z");
}
</style><path class="of0zm-dq"/><path class="vkrbpbi"/><path class="f7n3ibc"/><path class="y6q_qfu"/><path class="hi7u-ub"/><ellipse class="fwz4q-b"/><ellipse class="oscx8eb"/><path class="r6et9tf"/><path class="w-6g-lb"/>`;

/** @param props {{width?: string; height?: string;}} */
function Component(props) {
	const [local, others] = splitProps(props, ["width","height"]);

	return (<Icon width={local.width} height={local.height} viewBox={viewBox} content={content} fallback={"twemoji:flag-ceuta-and-melilla"} {...others} />);
}

export default Component;
