提交您的產(chǎn)品 
Ai應(yīng)用
Ai資訊
AI生圖
AI生視頻
FastbuildAI
Heroicons圖標
Heroicons圖標簡介
Heroicons是一套高質(zhì)量的開源圖標庫，由 Tailwind CSS 團隊和 Refactoring UI 團隊分別維護不同版本，
Heroicons適用于網(wǎng)頁和應(yīng)用程序開發(fā)。所有圖標均基于MIT許可證，允許任何人免費下載和使用，用于個人和商業(yè)項目。
Heroicons特點
高質(zhì)量SVG圖標：Heroicons提供清晰、一致的圖標設(shè)計，適合UI開發(fā)，支持Web和應(yīng)用設(shè)計。
兩種風格：包括Outline（輪廓線）和Solid（填充）風格，滿足不同設(shè)計需求。
應(yīng)用廣泛：圖標覆蓋了常見的UI元素和業(yè)務(wù)場景，適用于導(dǎo)航、操作、狀態(tài)指示等。
易于集成：支持直接在HTML中使用SVG代碼，以及通過npm安裝后在React、Vue等現(xiàn)代前端框架中作為組件使用。
版本更新：隨著版本迭代，圖標數(shù)量持續(xù)增加，例如有版本包含超過1200個圖標。
Heroicons使用方法
1.安裝：
對于前端項目，可以通過npm或Yarn安裝Heroicons的React或Vue庫。
npm install @heroicons/react
# 或者使用Yarn
yarn add @heroicons/react
2.引入圖標：
在代碼中，你可以直接導(dǎo)入并使用圖標，例如：
import { BellIcon } from '@heroicons/react/24/outline';
function App() {
return
}
3. 直接使用SVG：
也可以從Heroicons網(wǎng)站直接復(fù)制SVG代碼到HTML中使用。
4. Figma集成：
設(shè)計師可以利用Figma插件或直接下載SVG文件進行設(shè)計工作。
Heroicons不僅提供了多種樣式的圖標，還支持多種尺寸的圖標選擇，適應(yīng)不同的設(shè)計需求。用戶可以根據(jù)項目的具體要求，選擇24x24、20x20等不同尺寸的圖標。此外，Heroicons的圖標設(shè)計風格簡潔現(xiàn)代，適合各種類型的應(yīng)用程序和網(wǎng)站，尤其是與Tailwind CSS結(jié)合使用時，能夠?qū)崿F(xiàn)更好的視覺效果和用戶體驗。
Heroicons的圖標庫還在不斷更新，開發(fā)者可以關(guān)注其GitHub頁面，獲取最新的圖標和功能更新。
Github：https://github.com/tailwindlabs/heroicons
