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

const viewBox = {"width":36,"height":36};
const content = `<style>.dg0xprm {
  fill: #002395;
  d: path("M6.5 31H32a4 4 0 0 0 4-4v-4.5H19z");
}

.e2baoob {
  fill: #de3830;
  d: path("M32 5H6.5L19 13.5h17V9a4 4 0 0 0-4-4");
}

.kbnaodb {
  fill: #141414;
  d: path("M0 11v14l10.5-7z");
}

.lvxps2bs {
  fill: #eee;
  d: path("M6.5 5H4q-.233.001-.459.028L18.5 15.5H36v-2H19zM3.541 30.972q.226.027.459.028h2.5L19 22.5h17v-2H18.5z");
}

.ndks77b {
  fill: #ffb611;
  d: path("M0 9v2l10.5 7L0 25v2l13.5-9z");
}

.wpa2axbj {
  fill: #007a4d;
  d: path("M3.541 5.028A4 4 0 0 0 0 9l13.5 9L0 27a4 4 0 0 0 3.541 3.972L18.5 20.5H36v-5H18.5z");
}
</style><path class="e2baoob"/><path class="dg0xprm"/><path class="kbnaodb"/><path class="ndks77b"/><path class="wpa2axbj"/><path class="lvxps2bs"/>`;

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

export default Component;
