所以我有这个组件,我想改变SVG标志的填充属性导入。但与Qwik中的React不同,使用像调用组件这样的图像是不起作用的。或者可能是因为typescript,因为fill
属性抛出错误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;
如果我想使用的标志在differnet网页多次与differnt颜色填充将我需要有尽可能多的标志的颜色数量,我会喜欢的标志改变?
2条答案
按热度按时间qv7cva1a1#
阅读更多https://qwik.builder.io/docs/integrations/icons/
您可能需要
inline svg
方法,换句话说,将svg
原样粘贴为标记<svg>...etc</svg>
。你也可以像我所附的文章(页面底部)一样撰写它。
转到您导入的文件并复制源代码后,只需将其粘贴到组件中并播放。
检查
Qwick
建议的图像。它有很多不同的软件包准备去的图像,我相信填充支持。不要忘记
svg
可以继承stroke和fill作为css的颜色属性。如果父节点有color: red
,那么svg
有红色的fill
91zkwejq2#
更改svg颜色的一种方法是将定义颜色的属性设置为“currentColor”。通过这种方式,svg将有一个颜色分配给包含它的元素,为此,您可以创建一个渲染SVG的组件:
然后导入徽标组件
在本例中,在徽标组件中,fill属性设置为“currentColor”的svg将采用分配给父元素的颜色,在本例中是Linkwithlogo类
注意:这只在图标或徽标只有一种颜色时才起作用,
如果它是一个有几种颜色的svg:继续前面的示例,最好将svg代码直接添加到Link元素中,并将类添加到包含颜色的svg的每个部分
通过这种方式,您可以使用类从CSS更改颜色