reactのiconとui

heroicons

アイコン一覧

使い方等

名前一覧

インストール方法

npm install @heroicons/react

使い方

公式サイトのボタンからはダウンロードしないで名前だけ見てくる

import { BeakerIcon } from '@heroicons/react/24/solid' <- インポートする(24,20,16がある。outlineとsolidがある。)
<BeakerIcon className="size-6 text-blue-500" /> <- 使う

headlessui

インストール

npm install @headlessui/react@latest

使い方

import { Button } from '@headlessui/react'

function Example() {
  return (
    <Button className="rounded bg-sky-600 py-2 px-4 text-sm text-white data-[hover]:bg-sky-500 data-[active]:bg-sky-700">
      Save changes
    </Button>
  )
}

CSS

cssファイルに記載しインポートすると全体に適用されるっぽい？
インラインはこんな感じ

function About() {
  const header1 = {
    color: "blue",
    fontSize: "24px",
    fontWeight: "bold",
  };

    return (
      <div>
        <h1 style={header1}>header</h1>