內容簡介
Mudrava Icon Field for ACF with Lucide 是一款為 Advanced Custom Fields (ACF) 增加新欄位類型的外掛，讓使用者可以透過直觀的視覺選擇器從 Lucide 圖示庫中選擇圖示及品牌標誌，並將選擇的圖示值儲存至資料庫，輕量且靈活。
【主要功能】
• 視覺圖示選擇器：可選擇 1,791 個 Lucide 圖示及 3,457 個品牌標誌
• 品牌圖示：使用 Simple Icons 值，如 simple:facebook
• 自訂圖示庫：上傳自訂 SVG 圖示並可在設定中管理
• 短碼與輔助函數：提供 [lucide_icon] 短碼及 mudrava_get_lucide_icon() 輔助函數
• 智能搜尋：可依名稱或標籤即時篩選圖示
• 韌性高效：本地 REST 端點的懶加載圖示目錄
外掛標籤
開發者團隊
② 後台搜尋「Mudrava Icon Field for ACF with Lucide」→ 直接安裝（推薦）
原文外掛簡介
Mudrava Icon Field for ACF with Lucide adds a new field type to Advanced Custom Fields (ACF) that allows users to select icons from the Lucide icon library and brand logos from Simple Icons through an intuitive visual picker. The selected icon value is stored in the database, making it lightweight and flexible for frontend rendering.
Requirements: This plugin requires Advanced Custom Fields (ACF) version 6.0 or higher to function.
Features
Visual Icon Picker – Browse and select from 1,791 Lucide icons and 3,457 brand logos
Brand Icons – Brand logos use Simple Icons values such as simple:facebook
Custom Icon Library – Upload your own SVG icons under Settings, sanitized on upload and addressable as custom:
Shortcode & Helper – [lucide_icon] shortcode plus mudrava_get_lucide_icon() helper for templates
Smart Search – Filter icons by name or tags instantly
Performant – Lazy icon catalog over a local REST endpoint, byte-offset sprite lookups, inline frontend SVG output, paginated grid (100 icons per page)
Native ACF Look – Seamlessly integrates with ACF’s design language
Responsive – Works on all screen sizes
Accessible – Keyboard navigation support
Flexible Output – Return icon value or full SVG markup
No External Requests – All icon data is stored locally
Usage
After installing both ACF and this plugin:
Go to Custom Fields > Add New
Add a new field and select Lucide Icon as the field type
Configure the field settings (default value, return format, etc.)
Save your field group
Template Examples
Get Icon Name:
Get SVG Markup (with return_format = ‘svg’):
...
?>
Using the Helper Function:
'my-custom-class',
'width' => 32,
'height' => 32,
'stroke' => '#ff0000',
'title' => 'Launch', // accessible title
'mode' => 'sprite', // 'inline' (default) or 'sprite'
]);
?>
Shortcode
[lucide_icon name="rocket" size="32" title="Launch"]
Custom icons uploaded under Settings → Custom Icons are addressed as custom:
for example [lucide_icon name="custom:my-logo" title="My Logo"] or
mudrava_get_lucide_icon( ‘custom:my-logo’ ).
About Custom SVG Icons
Site owners can upload plain SVG icons under Settings → Custom Icons.
Uploads are parsed with DOMDocument (no network access) and reduced to the
same element and attribute allowlist as the bundled sets via wp_kses(), so
scripts, styles, embedded images and unsupported elements never reach storage.
Custom icons are stored as standalone files in the uploads directory, appear
in the picker search, and render with their own colors instead of a forced
currentColor tint.
About Lucide Icons
Lucide is a modern, open-source icon library with 1,700+ carefully crafted icons. The bundled Lucide assets are from lucide-static 1.38.0 and are licensed under ISC.
About Brand Icons
Brand logos are bundled separately from Simple Icons 16.29.0 and are saved with the simple: prefix, for example simple:facebook.
Simple Icons is distributed under CC0-1.0, but individual brand logos and trademarks may still be governed by each brand owner’s guidelines and permissions. Check the relevant brand guidelines before using a logo in production. Source and guideline URLs from Simple Icons are bundled in data/brand-icons-meta.json.
Privacy
Data Collection:
This plugin does not collect, store, or transmit any user data or personal information.
External Requests:
This plugin does not make any external HTTP requests. All icon data is stored locally and served from your WordPress installation.
Cookies:
This plugin does not use cookies.
Third-Party Services:
This plugin does not integrate with or send data to any third-party services.
