PHPackages abetwothree/laravel-iconify-api - 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. [API Development](/categories/api) 4. / 5. abetwothree/laravel-iconify-api ActiveLibrary[API Development](/categories/api) abetwothree/laravel-iconify-api =============================== A package to create a local API for the dynamic Iconify Icon components v1.3.0(4mo ago)5970↓72.3%[1 issues](https://github.com/abetwothree/laravel-iconify-api/issues)[4 PRs](https://github.com/abetwothree/laravel-iconify-api/pulls)MITPHPPHP ^8.4CI passing Since Feb 10Pushed 5d ago2 watchersCompare [ Source](https://github.com/abetwothree/laravel-iconify-api)[ Packagist](https://packagist.org/packages/abetwothree/laravel-iconify-api)[ Docs](https://github.com/abetwothree/laravel-iconify-api)[ GitHub Sponsors]()[ RSS](/packages/abetwothree-laravel-iconify-api/feed)WikiDiscussions main Synced 2w ago READMEChangelog (8)Dependencies (26)Versions (15)Used By (0) Laravel Iconify API & Icon Rendering ======================================== [](#laravel-iconify-api--icon-rendering) [![Latest Version on Packagist](https://camo.githubusercontent.com/eb6a43142de638bf842362ad5623ecb4fb547534be74b0f5ca8f2e3439a1e458/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f61626574776f74687265652f6c61726176656c2d69636f6e6966792d6170692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/abetwothree/laravel-iconify-api)[![Laravel Compatibility](https://camo.githubusercontent.com/c73f66492878e5aca0260f7f8a735a93051484502816db196cbc38353c44c21a/68747470733a2f2f62616467652e6c61726176656c2e636c6f75642f62616467652f61626574776f74687265652f6c61726176656c2d69636f6e6966792d617069)](https://packagist.org/packages/abetwothree/laravel-iconify-api)[![GitHub Tests Action Status](https://camo.githubusercontent.com/09f43ebdda10a20a5ae573b7d0b1d905ed972688c5d7f95ac517ca6cc0a2e554/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f61626574776f74687265652f6c61726176656c2d69636f6e6966792d6170692f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/abetwothree/laravel-iconify-api/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/35853bd93e7915b4b292f7c0afdb7d27fb9e0c796f358d6318523cfaa3a503a9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f61626574776f74687265652f6c61726176656c2d69636f6e6966792d6170692f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/abetwothree/laravel-iconify-api/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/2c01fdc9c984b3585b75e39f7535fb2824593f0bc15d0c2fd435ecf61cc7b448/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f61626574776f74687265652f6c61726176656c2d69636f6e6966792d6170692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/abetwothree/laravel-iconify-api) Make your Laravel Application an API for on demand icons using the [Iconify](https://iconify.design/index.html) icon web components. This Laravel package creates a few API routes for the [Iconify](https://iconify.design/index.html) icons [on demand API](https://iconify.design/docs/icon-components/). It allows you to easily use on demand icons and use your Laravel applicatioin as the Iconify API. It works similarly to the [Node Iconify API](https://github.com/iconify/api) and is a spiritual successor to their [PHP implementation](https://github.com/iconify/api.php). On demand icons work great whether you use Livewire, Inertia, or just plain Blade views to render your Laravel application and want to render icons dynamically using a single component. Additionally, this package provides a convenient way to render Iconify icons inline as SVGs within PHP files or in your Blade views. Also By Me ---------- [](#also-by-me) - [Laravel TypeScript Publish Package](https://github.com/abetwothree/laravel-ts-publish) - [Tolki JS NPM packages](https://github.com/abetwothree/tolki) Requirements ------------ [](#requirements) - PHP 8.5, 8.4 - Laravel 13.x, 12.x or 11.x How To Use ---------- [](#how-to-use) Install the package via composer: ``` composer require abetwothree/laravel-iconify-api ``` In your core application blade layout file add the following directive in the head section before your application's JS bundle: ``` @iconify ``` This will configure the [Iconify API](https://iconify.design/docs/api/providers.html#api-config) on demand icons to load the icons from your Laravel application instead of the Iconify API. By default Icon API routes will work out of the following route path in your Laravel application: ``` /iconify/api ``` The following routes are currently available: - `/iconify/api/{prefix}.json?icons={icon-prefix}` - Returns icon SVG data for an icon set. Icon prefix can be comma separated for multiple icons. - `/iconify/api/{prefix}/icons.json?icons={icon-prefix}` - Same as above. - `/iconify/api/collections` - Returns a list of icon collections available in your application. - `/iconify/api/collection?prefix={prefix}` - Returns the information for a specific icon collection. ### How To Display Dynamic On-Demand Icons [](#how-to-display-dynamic-on-demand-icons) To display on-demand icons follow the instructions on the [Iconify](https://iconify.design/docs/icon-components/) on demand docs and use any of their component libraries in your Laravel Application. You also need icon set data to be available in your application. You'll need to install the icon set data using NPM. See more [info here](https://iconify.design/docs/icons/icon-data.html#sources). It is recommended to install individual icon sets instead of the entire Iconify JSON set to keep your application lightweight. However, you can install the entire set if you wish and this package will work with either approach. Real-Time Inline Icon Rendering ------------------------------- [](#real-time-inline-icon-rendering) In addition to the HTTP API, this package can render icons directly to SVG in PHP for places where you want immediate server-side output. The icon finding and caching goes through the same process as the HTTP API, ensuring consistent behavior and performance. ### Helper function [](#helper-function) Use the global helper to render an icon string: ``` $svg = icon('heroicons:clock'); ``` Apply SVG attributes: ``` $svg = icon('heroicons:clock', [ 'class' => 'w-6 h-6', 'data-slot' => 'icon', ]); ``` ### Blade component [](#blade-component) Use the Blade component for direct rendering in views: ``` ``` ### Supported options [](#supported-options) Both the helper and the Blade component accept the same options as the official Iconify components. Anything not listed here is passed through as a plain SVG attribute, except `viewBox`, which is always computed from the icon data, and option keys that are not well-formed XML attribute names, which are skipped. That last rule checks the attribute *name* only — a key like `'x onload=alert(1)'` would otherwise open a second, live attribute, since escaping does not touch it. Well-formed keys such as `onclick` still render, exactly as they would through a Blade attribute bag. Values are rendered when they are a string, a number, a boolean, or an object with a `__toString()`. Anything else — an array, a closure, a plain object — is skipped rather than emitted as an empty attribute. OptionValuesEffect`width`, `height`number, CSS length, `auto`, `unset`Icon size. Defaults to `1em`. One side is derived from the other by aspect ratio. `unset`, `undefined` and `none` omit both attributes entirely. A falsy value (`0`, `''`, `false`) falls back to `1em`; the *string* `'0'` is kept, matching JavaScript truthiness.`color`any CSS colorApplied via `style="color: …"`, matching React's `style.color = value`. Only affects monotone icons (those using `fill="currentColor"` / `stroke="currentColor"`). As an inline style it beats any non-`!important` CSS rule — it was previously a `color="…"` attribute, which such a rule could override. A value containing `;`, `{`, `}`, `/*` or `*/` could inject a second declaration and is dropped entirely; `rgb(1,2,3)`, `hsl(210 100% 50%)`, `var(--x, red)`, `currentColor` and `color-mix(...)` are unaffected.`inline``true`Adds `vertical-align: -0.125em` so the icon sits on the text baseline.`rotate``1`–`3`, `"90deg"`, `"25%"`Quarter-turn rotation. Non-quarter values are ignored.`flip``"horizontal"`, `"vertical"`, `"horizontal,vertical"`Flip shorthand.`hFlip`, `vFlip``true`Flip on one axis.`h-flip`, `horizontal-flip`, `horizontalFlip``true`Aliases for `hFlip`.`v-flip`, `vertical-flip`, `verticalFlip``true`Aliases for `vFlip`.`aria-hidden`anything other than `true`Removes the default `aria-hidden="true"`.``` ``` ``` $svg = icon('heroicons:clock', ['width' => 32, 'color' => 'rebeccapurple', 'inline' => true]); ``` A `style` you supply yourself is always emitted last, so it overrides the `color` and `inline` styles the package generates. The framework-only props Iconify's React/Vue/Svelte components accept — `icon`, `mode`, `ssr`, `onLoad`, `children`, `fallback`, `customise`, `_ref` — are accepted and ignored rather than emitted as attributes. Alternate render modes (`mode="bg"`, `mode="mask"`) are not implemented; icons always render as inline ``. ### Naming and collision safety [](#naming-and-collision-safety) If your app already has a global helper or component with the same name, this package will skip registration and leave existing behavior untouched. You can also customize or disable each one in `config/iconify-api.php`: ``` 'inline' => [ 'enabled' => true, 'defaults' => [ 'class' => '', // Any default SVG attribute or render option is supported. // Examples: // 'data-source' => 'iconify-api', // 'style' => 'vertical-align: middle;', // 'width' => '1.5em', // 'inline' => true, ], 'helper' => [ 'enabled' => true, 'name' => 'icon', ], 'component' => [ 'enabled' => true, 'name' => 'icon', ], ], ``` Values from `defaults` are applied to every rendered icon. Per-icon options (helper or Blade attributes) override matching keys, except `class`, which is merged. Render options such as `width`, `height`, `rotate`, `flip`, `inline` and `color` are honoured here too, not just plain SVG attributes. ### PHPStan support [](#phpstan-support) This package ships a PHPStan stub for the default helper name `icon`, so static analysis can recognize `icon()` calls out of the box. If you rename the helper function (for example to `iconify_svg`), add a small project-level stub so PHPStan can recognize the custom function name: ```