import {Icon} from "@qinetik/anique/icon";
import Menu from "../../../../solid/icons/Menu";
import AddIcon from "@qinetik/mdi/AddIcon";
import {Row} from "@qinetik/anique";
export default function BasicIconExample() {
return (
<Row>
<Icon>
<Menu/>
</Icon>
<Icon fill={"blue"}>
<AddIcon />
</Icon>
</Row>
)
}
Icon
Icon is a simple component to display a svg icon, The svg icon is the child passed to Icon componentIcon is used to enforce size constraints, However nothing changes size passed in svg attributes
You can also use it to enforce fill of the svg
By default All icons in @qinetik/mdi have exact size
import {Icon} from "@qinetik/anique/icon";
import {Anique, Row} from "@qinetik/anique";
import Menu from "../../../../solid/icons/Menu";
export default function IconFillSizeExample() {
return (
<Row>
<Icon
fill={Anique.colors.success}
size={0}
>
<Menu/>
</Icon>
<Icon
fill={Anique.colors.error}
size={1}
>
<Menu/>
</Icon>
<Icon
fill={Anique.colors.warning}
size={2}
>
<Menu/>
</Icon>
</Row>
)
}