图标

图标是任何应用程序的重要组成部分。您可以在 Qwik 应用程序中添加超过 180,000 个图标。

`qwikest/icons`

此包提供了一种简化的方法，可以从各种图标集中将图标添加到您的 Qwik 应用程序中。

Bs: Bootstrap 图标
Go: GitHub 的 Octicons
Hi: Tailwind 的 Heroicons
In: Iconoir
Io: Ionic 的 Ionicons
Lu: Lucide [Feather 图标的超集]
Mo: Mono 图标
Si: Simple Icons [流行品牌的图标]
Tb: Tabler 图标

只需使用您选择的包管理器安装此包即可

npm i @qwikest/icons
yarn add @qwikest/icons
pnpm add @qwikest/icons

使用

import { LuRocket } from "@qwikest/icons/lucide";
 
export const MyComponent = component$(() => {
  // Icon size and color are inherited by default ⬇️
  return (
    <div style={{ color: "red", fontSize: "40px" }}>
      <LuRocket />
    </div>
  );
});

请参阅官方文档以获取更多详细信息。

`icones.js.org`

icones.js.org 是一个图标集合的集合。超过 180,000 个公有领域图标可供使用，随时可以在您的 Qwik 应用程序中使用。

Icones 由iconify 提供支持，它允许您轻松地将 Material Design、Phosphor、Remix、Carbon、Bootstrap、Tabler、Feather、Fluent、IconPark、Octicons 以及许多其他图标集中的图标添加到任何 Qwik 应用程序中。Twitter 表情符号、Fluent 表情符号、EmojiOne、Noto 表情符号…

单击“Qwik”按钮将图标代码复制到剪贴板，然后将其粘贴到您的项目中。

import type { PropsOf } from '@builder.io/qwik'
 
export function OcticonAlertFill12(props: PropsOf<'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

贡献者

感谢所有帮助改进此文档的贡献者！