0

So i have this component where i want to change the fill property of the svg logo imported. But unlike React in Qwik using an image like your calling a component doesn't work. or may be it's because of typescript, because the fill property throw the error Type '{ fill: string; }' is not assignable to type 'IntrinsicAttributes'. Property 'fill' does not exist on type 'IntrinsicAttributes'.

import { component$, useContext, useStylesScoped$ } from "@builder.io/qwik";
import styles from "./navbar.css?inline";
import TeslaLogo from "../../assets/images/tesla-logo.svg";
import Navigation from "./Navigation";
import { navbarContext } from "~/context/appContext";

const Navbar = component$(() => {
  useStylesScoped$(styles);


  const store = useContext(navbarContext)

  return (
    <div class="container">
      <TeslaLogo fill='red'/>
      <div class='img'><img src={TeslaLogo} alt="tesla-logo" class="tesla-logo" /></div>
      <div class='btn'><button class="menu-btn" onClick$={() => store.openNav = true}>Menu</button></div>
      {store.openNav && <Navigation />}
    </div>
  );
});

export default Navbar;

if i want to use the logo many times in differnet pages with differnt color fill will i need to have as many logos as the number of colors i will like the logo to change to ?

davdev
  • 1
  • 1

2 Answers2

0

Read here more https://qwik.builder.io/docs/integrations/icons/

You probably need inline svg approach in other words paste svg as it is, as a tag <svg>...etc</svg>.

Also you can compose it like in the article I've attached(bottom of the page).

import type { QwikIntrinsicElements } from '@builder.io/qwik'
 
export function OcticonAlertFill12(props: QwikIntrinsicElements['svg'], key: string) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 12 12" {...props} key={key}><path fill="#888888" d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z"></path></svg>
  )
}
export default OcticonAlertFill12

Go to the file you importing and copy the source after just paste it in the component and play around.

Check the images that Qwick suggests. It has a lot of different packages of ready to go images and I'm sure fill is supported.

Don't forget that svg can inherit stroke and fill as css color property. So if parent has color: red so svg has red fill

Vlad Rose
  • 179
  • 1
  • 5
0

One way to change the color of an svg is to set the property that defines the color to "currentColor". In this way, the svg will have a color assigned to the element that contains it, for this you can create a component that renders the SVG:

import { component$ } from "@builder.io/qwik";
import type { SVGProps } from "~/types/components";

export const Logo = component$<SVGProps>(({ color = "currentColor", size, width, height }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      /**If you do not set a color using the "color" prop, its default value will be "currentColor".*/
      fill={color}
      viewBox="0 0 24 24"
      width={size || width || "24"}
      height={size || height || "24"}
    >
      <path />
    </svg>
  );
});

Then you import the logo component

import { Logo } from "./logo/logo.tsx";

const Navbar = component$(() => {
  useStylesScoped$(styles);

  const store = useContext(navbarContext)

  return (
    <div class="container">
      <Link href="/" class="logo">
        <Logo />
      </Link>
    </div>
  );
});

In this example, in the logo component, the svg having the fill property set to "currentColor" will take the color assigned to the parent element, in this case the Link with logo class

.logo {
  color: #008080;
}
.logo:hover {
  color: #93bebd;
}

<Link href="/" class="logo">
  <Logo />
</Link>

Note: that this will only work if the icon or logo only has one color,

If it is an svg that has several colors: Continuing with the previous example, it would be better to add the svg code directly inside the Link element and add a class to each part of the svg that contains a color

const Navbar = component$(() => {
  useStylesScoped$(styles);

  return (
    <div class="container">
      <Link
        href="/"
        class="logo"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <path
            fill="#fff"
            class="path-1"
          />
          <path
            fill="#000"
            class="path-2"
          />
          <path
            fill="#00f"
            class="path-3"
          />
        </svg>
      </Link>
    </div>
  );
});

In this way you can change the color from the css using the classes

.path-1 {
  fill: //New color;
}

//or when hovering on the Link
.logo:hover .path-1 {
  fill: //New color;
}
Jonathan Holguin
  • 1