一個方便的 PHP 函式庫,用於渲染 svg 圖示。
直接從您的 php 檔案存取 150 多個開源圖示集中的 200,000 多個圖示!
感謝 Iconify ❤️
composer require yassinedoghri/php-icons
執行以下命令初始化設定檔:
vendor/bin/php-icons init
這將提示您在專案的根目錄中建立php-icons.php
設定檔。請參閱配置參考以取得更多資訊。
icon(string $iconKey, array $attributes)
函數在視圖檔案中使用全域icon(…)
函數,並將圖示鍵 ( {prefix}:{icon}
) 作為參數:
{prefix}
:是圖標集前綴{name}
:是圖示名稱 echo icon ( ' material-symbols:bolt ' );
// <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
// <path fill="currentColor" d="m8 22l1-7H4l9-13h2l-1 8h6L10 22z"/>
// </svg>
若要新增屬性,請使用第二個參數或呼叫attr()
或attributes()
方法:
echo icon ( ' material-symbols:bolt ' , [
' class ' => ' text-2xl ' ,
' style ' => ' color: yellow; '
]);
// <svg class="text-2xl" style="color: yellow;" […]>…</svg>
echo icon ( ' material-symbols:bolt ' )
-> attr ( ' class ' , ' text-2xl ' )
-> attr ( ' style ' , ' color: yellow; ' );
// <svg class="text-2xl" style="color: yellow;" […]>…</svg>
echo icon ( ' material-symbols:bolt ' )
-> attributes ([
' class ' => ' text-2xl ' ,
' style ' => ' color: yellow; '
]);
// <svg class="text-2xl" style="color: yellow;" […]>…</svg>
提示
從 Iconify 的索引中尋找並複製流行的開源圖示集的圖示鍵。
重要的
首次定義圖示時,將顯示一個佔位符(預設 �
�)。
確保運行scan
命令來載入 SVG。
vendor/bin/php-icons scan
scan
指令將對您配置的路徑中的所有 PHP 檔案執行靜態分析,以識別圖示鍵 ( {prefix}:{name}
) 並下載對應的圖示。
預設使用icon
標識符:
icon(…)
功能
echo icon ( ' ri:php-fill ' ) // identified "ri:php-fill"
註釋中的@icon(…)
註釋
// @icon('ri:heart-fill') --> identified "ri:heart-fill"
# @icon('ri:home-fill') --> identified "ri:home-fill"
/*
* @icon('ri:user-fill') --> identified "ri:user-fill"
* @icon('ri:group-fill') --> identified "ri:group-fill"
*/
您的設定檔由php-icons
CLI 工具和 PHPIcons 類別加載,它應該如下所示:
<?php
declare (strict_types= 1 );
use PHPIcons Config PHPIconsConfig ;
return PHPIconsConfig:: configure ()
-> withPaths ([
__DIR__ . ' /src '
])
-> withDefaultPrefix ( '' )
-> withPlaceholder ( ' � ' );
withPaths([])
來源檔案的路徑列表。 PHP 檔案將被解析和掃描以發現您定義的圖示。
withAPIHosts([])
Iconify API 主機用於查詢下載 svg 圖示。首先查詢第一台主機,其餘的則用作備份。
預設為 Iconify 的公共主機: ["https://api.iconify.design","https://api.simplesvg.com", "https://api.unisvg.com"]
withLocalIconSets([])
如果您有自訂圖標,php-icons 可以在您的檔案系統中本地找到它們,而不是呼叫 Iconify API。
重要的
php-icons 將在本機圖示集中尋找{name}.svg
文件
接受一個關聯數組,其中圖標集前綴作為鍵,其路徑作為值。
my-custom-set/
├── heart.svg
├── rocket.svg
├── star.svg
└── user.svg
// in your config file
-> withLocalIconSets ([
' custom ' => ' /path/to/my-custom-set ' ,
])
// ✅ ALL GOOD
echo icon ( ' custom:heart ' );
echo icon ( ' custom:rocket ' );
echo icon ( ' custom:star ' );
echo icon ( ' custom:user ' );
// ICONS NOT FOUND
echo icon ( ' custom:banana ' );
echo icon ( ' custom:key ' );
withDefaultPrefix('')
未設定時使用的預設圖示設定前綴。
將material-symbols
設定為預設前綴:
// this
echo icon ( ' bolt ' );
// same as this
echo icon ( ' material-symbols:bolt ' );
withDefaultIcon()
未找到圖示時使用的預設圖示。
接受圖標鍵{prefix}:{name}
。如果未設定前綴,則將使用預設前綴。
withDefaultIconPerSet([])
集合中未找到圖示時使用的預設圖示。
接受一個關聯數組,鍵是圖示集前綴,值是預設圖示。
withPlaceholder('�')
當圖示未找到或未知時顯示的字串。
預設為 �
替換字元)。
withIdentifiers([])
用於識別來源檔案中的圖示鍵的函數或方法名稱。
預設為['icon']
。
> vendor/bin/php-icons
_ _
_ __ | | __ _ __ (_) ___ ___ _ __ ___
| ' _ | ' _ | ' _ | |/ __/ _ | ' _ / __ |
| | _) | | | | | _) | | | (_ | (_) | | | _ _
| .__/ | _ | | _ | .__/ | _ | _ __ _ __/ | _ | | _ | ___/
| _ | | _ |
A convenient PHP library to render svg icons
----------------------------------------------
PHPIcons, version 1.0.0.0-dev
Commands:
*
init i Configure PHPIcons interactively
scan s Scans source files and loads icons
Run ` < command > --help ` for specific help
如果沒有 Iconify 團隊和維護許多開源圖標集的設計師的出色工作,這是不可能實現的。
靈感來自天文圖標、刀片圖標和校長。
根據 MIT 許可證發布的代碼。
版權所有 (c) 2024 年至今,Yassine Doghri (@yassinedoghri)。