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

const viewBox = {"width":36,"height":36};
const content = `<style>.ata9www {
  fill: #ce1225;
  d: path("M0 13h36v10H0z");
}

.denkmuf {
  cx: 8.5px;
  cy: 16.5px;
  fill: #dca841;
  rx: 1.5px;
  ry: .5px;
}

.e2_ipwb {
  cx: 8.5px;
  cy: 18.5px;
  fill: #dca841;
  rx: 1.5px;
  ry: .5px;
}

.h8lpipbo {
  fill: #f4cb58;
  d: path("M10.269 19.5c0 .828-.792 2.079-1.769 2.079S6.731 20.328 6.731 19.5S7.523 18 8.5 18s1.769.671 1.769 1.5");
}

.imb3hgo {
  cx: 8.5px;
  cy: 19.5px;
  fill: #dca841;
  rx: 2.5px;
  ry: 1.5px;
}

.j_8q6crn {
  fill: #002b7f;
  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");
}

.j-ojpvb {
  fill: #eee;
  d: path("M0 9h36v18H0z");
}

.krb-h3ng {
  fill: #89c5e4;
  d: path("M10 18c0 1.104-.671 2-1.5 2S7 19.104 7 18s.671-1.498 1.5-1.498S10 16.896 10 18");
}

.ngzm4me {
  cx: 8.5px;
  cy: 18px;
  fill: #eee;
  rx: 3.5px;
  ry: 4px;
}

.omuh27b {
  cx: 8.5px;
  cy: 18.5px;
  fill: #088930;
  rx: 1.5px;
  ry: 2.5px;
}

.oyv5ngs {
  cx: 8.5px;
  cy: 16px;
  fill: #89c5e4;
  rx: 1.5px;
  ry: 1px;
}
</style><path class="j_8q6crn"/><path class="j-ojpvb"/><path class="ata9www"/><ellipse class="ngzm4me"/><path class="h8lpipbo"/><ellipse class="imb3hgo"/><ellipse class="oyv5ngs"/><ellipse class="omuh27b"/><ellipse class="denkmuf"/><path class="krb-h3ng"/><ellipse class="e2_ipwb"/>`;

/** @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-costa-rica"} {...others} />);
}

export default Component;
