[Laravel] Heroicons UIを使う

Heroicons UIには、Webサイトで利用するアイコンが揃っています。

今回はsvgのアイコンをLaravelのBladeで表示させます。

Heroicons UIのダウンロード

以下のリポジトリからソースコードをダウンロードして、public\vendor\heroicons-uiへ配置します。

publicフォルダへ配置したので、以下のようなHTMLでアイコンの表示が可能になりました。

// ブラウザアイコンを表示
<img src="{{ asset('vendor/heroicons-ui/svg/icon-browser.svg') }}" />

Blade SVGのインストール

composerで以下のパッケージをインストールしてください。

adamwathan/blade-svg

Blade SVGパッケージは、インラインSVGまたはSVGスプライトを使用するための新しいディレクティブを追加します。

詳しい使い方については readme.md を参照してください。

# インストール
$ composer require nothingworks/blade-svg

# 設定ファイルの公開
$ php artisan vendor:publish --provider="BladeSvg\BladeSvgServiceProvider"

config/app.phpへ追記します。

// ...
'providers' => [
    // ...

    BladeSvg\BladeSvgServiceProvider::class,

    // ...
],
// ...

config/blade-svg.phpを以下のように記述します。

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | SVG Path
    |--------------------------------------------------------------------------
    |
    | This value is the path to the directory of individual SVG files. This
    | path is then resolved internally. Please ensure that this value is
    | set relative to the root directory and not the public directory.
    |
    */

    'svg_path' => 'public/vendor/heroicons-ui/svg',

    /*
    |--------------------------------------------------------------------------
    | Spritesheet Path
    |--------------------------------------------------------------------------
    |
    | If you would rather have one spritesheet than a lot of individual SVG
    | files, you may specify a path to a spritesheet. The SVG images are
    | extracted from this spritesheet to be rendered out individually.
    |
    */

    'spritesheet_path' => 'resources/assets/svg/spritesheet.svg',

    /*
    |--------------------------------------------------------------------------
    | Spritesheet URL
    |--------------------------------------------------------------------------
    |
    | If you don't want to embed the spritesheet directly in your markup and
    | would rather reference an external URL, you can specify the path to
    | the external spritesheet to use with this configuration option.
    |
    */

    'spritesheet_url' => '',

    /*
    |--------------------------------------------------------------------------
    | Inline Rendering
    |--------------------------------------------------------------------------
    |
    | This value will determine whether or not the SVG should be rendered inline
    | or if it should reference a spritesheet through a <use> element.
    |
    | Default: true
    |
    */

    'inline' => true,

    /*
    |--------------------------------------------------------------------------
    | Optional Class
    |--------------------------------------------------------------------------
    |
    | If you would like to have CSS classes applied to your SVGs, you must
    | specify them here. Much like how you would define multiple classes
    | in an HTML attribute, you may separate each class using a space.
    |
    | Default: ''
    |
    */

    'class' => 'icon',
];

Bladeテンプレートを変更する

resources/views/welcome.blade.phpを変更します。 (Laravelインストール時にトップページで表示されるファイルです)

// 90行目あたりを変更
<div class="links">
	<a href="https://laravel.com/docs">
		@svg('icon-browser') Documentation
	</a>
	<a href="https://laracasts.com">
		@svg('icon-video') Laracasts
	</a>
	<a href="https://laravel-news.com">
		@svg('icon-news') News
	</a>
	<a href="https://forge.laravel.com">
		@svg('icon-cog') Forge
	</a>
	<a href="https://github.com/laravel/laravel">
		@svg('icon-code') GitHub
	</a>
</div>

サーバーを起動して確認してみましょう。

laravel-heroicons-ui_01

SVGアイコンが表示されました！

また、以下のようなcssを追加してみましょう。

// 65行目あたりを変更
<style>
	//...
	.icon {
		fill: red;
	}
</style>

laravel-heroicons-ui_02

SVGアイコンの色が変わりました！

最後に

Heroicons UIのチートシートです。（画像）

laravel-heroicons-ui_03