アイコン

アイコンはあらゆるアプリケーションにおいて重要な部分です。Qwik アプリに追加できるアイコンは既に180,000種類以上あります。

`qwikest/icons`

このパッケージを使用すると、さまざまなアイコンセットから Qwik アプリにアイコンを追加する簡素化された方法が提供されます。

Bs: Bootstrap Icons
Go: GitHub の Octicons
Hi: Tailwind の Heroicons
In: Iconoir
Io: Ionic の Ionicons
Lu: Lucide [Feather アイコンのスーパーセット]
Mo: Mono Icons
Si: Simple Icons [人気のブランドのアイコン]
Tb: Tabler Icons

お好みのパッケージマネージャーでパッケージをインストールするだけです。

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

貢献者

このドキュメントの改善に貢献してくれたすべての貢献者に感謝します！