blade系package - blade-ui-kit/blade-icons
Requirements
PHP 7.4 or higher
Laravel 8.0 or higher
という事で結構
つこてみる
拙作laravel10-starterのテストも兼ねて
% git clone https://gitlab.com/catatsumuri/laravel10-starter.git -b laravel-ui-bootstrap
Cloning into 'laravel10-starter'...
remote: Enumerating objects: 308, done.
remote: Counting objects: 100% (308/308), done.
remote: Compressing objects: 100% (279/279), done.
remote: Total 308 (delta 102), reused 85 (delta 6), pack-reused 0
Receiving objects: 100% (308/308), 155.64 KiB | 825.00 KiB/s, done.
Resolving deltas: 100% (102/102), done.
% %cd laravel10-starter/
% docker run --rm -it -v $(pwd):/app composer install
% ./vendor/bin/sail up
とsailが上がってる状態で
% cp .env.example .env.env
APP_PORT=8000
VITE_HOST=localhost
この辺を必要であれば編集し
% ./vendor/bin/sail artisan key:gen
% ./vendor/bin/sail npm install
% ./vendor/bin/sail npm run devこれで起動できるはず
パッケージの説明
説明によると
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
<!-- SVG paths for the icon -->
</svg>
などという長えsvgをBlade Iconsを使用した場合以下のように短縮して書ける。これはご覧の通りlaravel componentの機能なのでその対応が必要ではあるだろうが
<x-icon-camera class="w-6 h-6" />または @svg ディレクティブを使用して、
@svg('camera', 'w-6 h-6')という事も可能のようである。なお、このパッケージは「ベースパッケージ」でありサードパーティー製のアイコンセットを導入しないと機能しない。
アイコン検索
https://blade-ui-kit.com/blade-icons#search
特定のアイコンを検索可能
インストール
composer require blade-ui-kit/blade-icons
php artisan vendor:publish --tag=blade-iconsこちらはsailを使ってたときのlog
% ./vendor/bin/sail composer require blade-ui-kit/blade-icons
./composer.json has been updated
Running composer update blade-ui-kit/blade-icons
Loading composer repositories with package information
Updating dependencies
Nothing to modify in lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
- Downloading blade-ui-kit/blade-icons (1.5.2)
- Installing blade-ui-kit/blade-icons (1.5.2): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
INFO Discovering packages.
blade-ui-kit/blade-icons ........................................................................ DONE
laravel/sail .................................................................................... DONE
laravel/sanctum ................................................................................. DONE
laravel/tinker .................................................................................. DONE
laravel/ui ...................................................................................... DONE
nesbot/carbon ................................................................................... DONE
nunomaduro/collision ............................................................................ DONE
nunomaduro/termwind ............................................................................. DONE
spatie/laravel-ignition ......................................................................... DONE
83 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force
INFO No publishable resources for tag [laravel-assets].
No security vulnerability advisories found
Using version ^1.5 for blade-ui-kit/blade-icons
% ./vendor/bin/sail artisan vendor:publish --tag=blade-icons
INFO Publishing [blade-icons] assets.
Copying file [vendor/blade-ui-kit/blade-icons/config/blade-icons.php] to [config/blade-icons.php] DONE
以下はAIが日本語にコメントを書き換えた設定ファイルである
<?php
return [
/*
|--------------------------------------------------------------------------
| アイコンセット
|--------------------------------------------------------------------------
|
| この設定項目を使用して、いくつかのデフォルトのアイコンセットを定義できます。
| アイコンセットのキー名と以下のオプションの組み合わせを提供してください。
|
*/
'sets' => [
// 'default' => [
//
// /*
// |-----------------------------------------------------------------
// | アイコンのパス
// |-----------------------------------------------------------------
// |
// | アプリケーションのルートからのSVGアイコンディレクトリへの相対パスを指定します。
// | アイコンは再帰的にロードされるため、すべてのサブディレクトリをリストする必要はありません。
// |
// */
//
// 'path' => 'resources/svg',
//
// /*
// |-----------------------------------------------------------------
// | ファイルシステムディスク
// |-----------------------------------------------------------------
// |
// | 必要に応じて、アイコンを読み込む特定のファイルシステムディスクを指定できます。
// | ディスクを定義すると、「path」オプションはディスクのルートから相対になります。
// |
// */
//
// 'disk' => '',
//
// /*
// |-----------------------------------------------------------------
// | デフォルトの接頭辞
// |-----------------------------------------------------------------
// |
// | この設定項目を使用して、アイコンに適用されるデフォルトの接頭辞を定義できます。
// | ダッシュ区切りは、すべてのアイコン名に自動的に適用されます。一意である必要があります。
// |
// */
//
// 'prefix' => 'icon',
//
// /*
// |-----------------------------------------------------------------
// | フォールバックアイコン
// |-----------------------------------------------------------------
// |
// | この設定項目を使用して、このセット内でアイコンが見つからない場合のフォールバックアイコンを定義できます。
// |
// */
//
// 'fallback' => '',
//
// /*
// |-----------------------------------------------------------------
// | デフォルトセットクラス
// |-----------------------------------------------------------------
// |
// | この設定項目を使用して、このセット内のすべてのアイコンにデフォルトで適用されるクラスを定義できます。
// |
// */
//
// 'class' => '',
//
// /*
// |-----------------------------------------------------------------
// | デフォルトセット属性
// |-----------------------------------------------------------------
// |
// | この設定項目を使用して、このセット内のすべてのアイコンにデフォルトで適用される属性を定義できます。
// |
// */
//
// 'attributes' => [
// // 'width' => 50,
// // 'height' => 50,
// ],
//
// ],
],
/*
|--------------------------------------------------------------------------
| グローバルデフォルトクラス
|--------------------------------------------------------------------------
|
| この設定項目を使用して、すべてのアイコンにデフォルトで適用されるクラスを定義できます。
|
*/
'class' => '',
/*
|--------------------------------------------------------------------------
| グローバルデフォルト属性
|--------------------------------------------------------------------------
|
| この設定項目を使用して、すべてのアイコンにデフォルトで適用される属性を定義できます。
|
*/
'attributes' => [
// 'width' => 50,
// 'height' => 50,
],
/*
|--------------------------------------------------------------------------
| グローバルフォールバックアイコン
|--------------------------------------------------------------------------
|
| この設定項目を使用して、任意のセットでアイコンが見つからない場合のグローバルフォールバックアイコンを定義できます。
| これは、任意の設定されたセットからの任意のアイコンを参照できます。
|
*/
'fallback' => '',
/*
|--------------------------------------------------------------------------
| コンポーネント
|--------------------------------------------------------------------------
|
| これらの設定項目を使用して、Bladeコンポーネントに関するいくつかの設定を定義できます。
|
*/
'components' => [
/*
|----------------------------------------------------------------------
| コンポーネントを無効にする
|----------------------------------------------------------------------
|
| この設定項目を使用して、Bladeコンポーネントを完全に無効にできます。
| 大きなアイコンライブラリで作業する際のパフォーマンス問題を避けるために便利です。
|
*/
'disabled' => false,
/*
|----------------------------------------------------------------------
| デフォルトのアイコンコンポーネント名
|----------------------------------------------------------------------
|
| この設定項目を使用して、デフォルトのアイコンクラスコンポーネントの名前を定義できます。
|
*/
'default' => 'icon',
],
];
fontawesomeを使ってみる
昔はiconセットといえばfontawesomeだった事もあったくらいだと思うけどまあいれてみよう
composer require owenvoke/blade-fontawesomeresources/views/auth/login.blade.php
<label for="email" class="col-md-4 col-form-label text-md-end"><x-fas-envelope /> {{ __('Email Address') }}</label>
こんな風に書くと…
こんな事になっちゃうので
<label for="email" class="col-md-4 col-form-label text-md-end"><x-fas-envelope width="16" height="16" /> {{ __('Email Address') }}</label>こんな風に縦横指定してあげればまあ使えるけど
やっぱイチイチ書くのは辛いからclassで指定した方がいいのかなあとも思いますナ。
とはいえ、アイコンセットをいろいろ切り替えられるので便利なパッケージであろうとは思われる。
この記事が気に入ったらサポートをしてみませんか？