#Qwik icons as props

8 messages · Page 1 of 1 (latest)

dusky sleet
#

Hello. i am trying to pass a qwik icon as a prop to a component, but i am not being able to do it. Any help? When i try it i get [object Object] instead of the icon...

sinful knot
#

Use the PropFunction type

#

Aka a QRL contains a closure that renders an element

#

$(() => <MyIcon />)

dusky sleet
#

im gonna test it right now

sinful knot
#

On I assumed you'd tried slots and wanted to use the prop route 👍

rapid mural
#

Found a really nice solution without the use of slots

import type { Component } from "@builder.io/qwik";
import type { IconProps } from "@qwikest/icons/*";
import { component$ } from "@builder.io/qwik";
import { Link } from "@builder.io/qwik-city";

export interface SidebarLinkProps {
  label: string;
  url: string;
  Icon: Component<IconProps>;
}

export const SidebarLink = component$<SidebarLinkProps>(
  ({ label, url, Icon }) => {    
    return (
      <Link href={url}>
        <Icon />
        {label}
      </Link>
    );
  }
);