脚本プランナー▸ 
AIアプリ 
AIニュース 
Heroicons：高品質なオープンソースアイコンライブラリ
Heroicons：高品質なオープンソースアイコンライブラリ紹介
Heroiconsは、Tailwind CSSチームとRefactoring UIチームがそれぞれ異なるバージョンをメンテナンスしている、高品質なオープンソースのアイコンライブラリです。
Heroiconsは、Webページやアプリケーション開発に適しています。すべてのアイコンはMITライセンスに基づいており、誰でも無料でダウンロードして使用することができ、個人プロジェクトや商用プロジェクトの両方で利用できます。
Heroiconsの特徴
高品質なSVGアイコン：Heroiconsは明確で一貫性のあるアイコン設計を提供し、UI開発、Webデザイン、アプリデザインに適しています。
2つのスタイル：Outline（アウトライン）とSolid（塗りつぶし）のスタイルがあり、さまざまなデザイン要件に対応します。
幅広い応用：アイコンは一般的なUI要素やビジネスシナリオを網羅し、ナビゲーション、操作、状態表示などに適しています。
簡単な統合：HTMLで直接SVGコードを利用できるほか、npmでインストールすることでReactやVueなどの最新のフロントエンドフレームワークでコンポーネントとしても使用できます。
バージョン更新：バージョンの反復に伴い、アイコン数が増加し続けており、例えば1,200以上のアイコンを含むバージョンもあります。
Heroiconsの使用方法
1.インストール：
フロントエンドプロジェクトの場合、npmまたはYarnを通じてHeroiconsのReactまたはVueライブラリをインストールできます。
npm install @heroicons/react
# またはYarnを使用
yarn add @heroicons/react
2.アイコンのインポート：
コード内で、次のようにアイコンを直接インポートして使用できます：
import { BellIcon } from '@heroicons/react/24/outline';
function App() {
return
}
3. SVGを直接使用：
HeroiconsのWebサイトからSVGコードを直接コピーして、HTMLで使用することもできます。
4. Figmaとの統合：
デザイナーはFigmaプラグインを利用したり、SVGファイルを直接ダウンロードしてデザイン作業を行うことができます。
Heroiconsは多様なスタイルのアイコンを提供するだけでなく、さまざまなサイズのアイコン選択もサポートしており、さまざまなデザイン要件に対応します。ユーザーはプロジェクトの具体的な要件に応じて、24x24や20x20など異なるサイズのアイコンを選択できます。さらに、Heroiconsのアイコンはシンプルでモダンなデザインスタイルを採用しており、特にTailwind CSSと組み合わせて使用することで、あらゆるタイプのアプリケーションやウェブサイトに最適な、より優れた視覚効果とユーザーエクスペリエンスを実現できます。
Heroiconsのアイコンライブラリは継続的に更新されており、開発者はGitHubページをフォローすることで、最新のアイコンや機能の更新情報を入手できます。
Github：https://github.com/tailwindlabs/heroicons
