PHPackages                             blinq/icons - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. blinq/icons

ActiveLibrary[Utility & Helpers](/categories/utility)

blinq/icons
===========

Super simple embedding of icons sets in you Laravel application.

v1.0.4(2y ago)037MITPHPPHP ^8.1

Since Aug 4Pushed 2y ago1 watchersCompare

[ Source](https://github.com/blinq-dev/laravel-blade-icons)[ Packagist](https://packagist.org/packages/blinq/icons)[ Docs](https://github.com/blinq/icons)[ RSS](/packages/blinq-icons/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (5)Dependencies (7)Versions (6)Used By (0)

Laravel blade icons
===================

[](#laravel-blade-icons)

One-click icons for Laravel

This package makes it super simple to embed svg icons in your laravel project. No need to download entire icon sets that will bloat your code. It only grabs the icons you want and caches them locally 🚀

Available at the time or writing:

- Heroicons (mini / outline / solid)
- Font awesome (brands / regular / solid)
- Material icons (default / outlined / round / sharp / twotone)

Go see

[![icons](https://private-user-images.githubusercontent.com/168357/258758665-2ad43a5e-1aed-4da7-a3e4-f6e1d7ad9f81.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODAyNTMwMjAsIm5iZiI6MTc4MDI1MjcyMCwicGF0aCI6Ii8xNjgzNTcvMjU4NzU4NjY1LTJhZDQzYTVlLTFhZWQtNGRhNy1hM2U0LWY2ZTFkN2FkOWY4MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNTMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDUzMVQxODM4NDBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xYTNkYzRkNThmZWRiZmNjMGM4ZDk5NWYwZGUzMmY5ZDMwOWViMGQyYmUwOGQyN2EwZjAxZjc3Y2MyYzg3ODhkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.76vk2LBd8cIz8GToAhRVlDjrtQvdASPhWrTlygaACAM)](https://private-user-images.githubusercontent.com/168357/258758665-2ad43a5e-1aed-4da7-a3e4-f6e1d7ad9f81.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODAyNTMwMjAsIm5iZiI6MTc4MDI1MjcyMCwicGF0aCI6Ii8xNjgzNTcvMjU4NzU4NjY1LTJhZDQzYTVlLTFhZWQtNGRhNy1hM2U0LWY2ZTFkN2FkOWY4MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNTMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDUzMVQxODM4NDBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xYTNkYzRkNThmZWRiZmNjMGM4ZDk5NWYwZGUzMmY5ZDMwOWViMGQyYmUwOGQyN2EwZjAxZjc3Y2MyYzg3ODhkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.76vk2LBd8cIz8GToAhRVlDjrtQvdASPhWrTlygaACAM)Installation
------------

[](#installation)

Simply conjure up the following in your terminal:

```
composer require blinq/icons
```

Usage
-----

[](#usage)

Go to  and find the icon you want.

```

```

That's it! First time around, it'll download the icon to your resources folder, and from then on, it'll load from there.

Configuration
-------------

[](#configuration)

Optionally, you can publish the config file using:

```
php artisan vendor:publish --tag="blinq-icons:config"
```

This is the contents of the published config file:

```
return [
    /**
     * Set the download path for the icons
     */
    'download_path' => base_path('resources/svg'),
    /**
     * Sets the prefix for the blade components
     * x-icon becomes x-prefix-icon
     */
    'prefix' => null,
];
```

Optionally, you can publish the views using

```
php artisan vendor:publish --tag="blinq-icons:views"
```

Add another icon pack & contribute
--------------------------------------

[](#add-another-icon-pack--contribute)

Would you like to add another icon pack? Let's use Heroicons as an example.

You can find the "academic-cap" icon here:

Thus, the download base path is:

If you want to obtain a list of all files available in this GitHub repository, you can use the following URL:

We must then transform this list into a format that `blinq/icons` understands. This transformation is described in a `discovery.json` file, which is created automatically.

```
{
    "variants": [
        "mini",
        "outline",
        "solid"
    ],
    "icons": {
        "mini\/academic-cap.svg": {
            "url": "20\/solid\/academic-cap.svg"
        },
        "mini\/adjustments-horizontal.svg": {
            "url": "20\/solid\/adjustments-horizontal.svg"
        },
        ...
```

To achieve this, we need to write some code that will transform the GitHub trees response into a `discovery.json` file. Take a class at the `beforeDiscoveryFileCreated` method below.

In this case, we also need to make adjustments to the SVG contents so they work well with the classes we apply to them. You can find guidance in the `beforeSvgFileCreated` method:

- Remove all specified width and height, as these should be configurable by the user of the icon.
- Similarly, remove all specified colors.
- Set the fill or stroke to currentColor, allowing the user to specify it.

These operations can be consolidated into a single class that extends `IconPack`:

```