圖示

圖示是任何應用程式的重要組成部分。您已經可以將超過 180,000 個圖示添加到您的 Qwik 應用程式中。

`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 Emoji、Fluent Emoji、EmojiOne、Noto Emoji... 等等。

點擊 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

貢獻者

感謝所有幫助改進此文件的貢獻者！