PHPackages hebinet/laravel-svg-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. [Templating & Views](/categories/templating) 4. / 5. hebinet/laravel-svg-icons ActiveLibrary[Templating & Views](/categories/templating) hebinet/laravel-svg-icons ========================= Allows to inline svg icons via a simple blade directive v1.3.4(5y ago)1634MITPHPPHP ^7.2|^8.0 Since Jul 29Pushed 5y agoCompare [ Source](https://github.com/hebinet/laravel-svg-icons)[ Packagist](https://packagist.org/packages/hebinet/laravel-svg-icons)[ Docs](https://github.com/hebinet/laravel-svg-icons)[ RSS](/packages/hebinet-laravel-svg-icons/feed)WikiDiscussions master Synced 2mo ago READMEChangelog (8)Dependencies (5)Versions (10)Used By (0) Laravel SVG Icons ================= [](#laravel-svg-icons) Allows to inline [Font Awesome 5+](https://fontawesome.com/)'s SVG icons without javascript via a simple Laravel Blade directive. Installation ------------ [](#installation) ### Install composer package [](#install-composer-package) You can install it using Composer: ``` composer require hebinet/laravel-svg-icons ``` Optionally, you can also publish the config file of the package. ``` php artisan vendor:publish --provider="Hebinet\SvgIcons\ServiceProvider" --tag=config ``` ### Install SVG font [](#install-svg-font) As a next step you need to install Font Awesome via npm: ``` npm install @fortawesome/fontawesome-free ``` The path to the SVG files in the npm package is configured by default. But you can change the path via the config parameter `path_to_fontawesome` in `config\icons.php` if you want to. ### Add Font Awesome SVG CSS-Style [](#add-font-awesome-svg-css-style) To display the icons correctly you need to add an additional css file which can be found in the npm `@fortawesome/fontawesome-free` package. I would recommend using Webpack to publish the file in the `public/css` directory. ``` // Inside webpack.mix.js mix.copy('node_modules/@fortawesome/fontawesome-free/css/svg-with-js.css', 'public/css/svg-icons.css'); ``` Afterwards you need to add the `svg-icons.css` file in the head section of your site. ``` ``` In order to inherit the font color of the parent correctly you have to add the following style declaration in your global CSS file ``` svg.svg-inline--fa { fill: currentColor; } ``` Usage ----- [](#usage) You can now add the new `@icon` blade directive to add the inline SVG icon. The argument for the directive is the same as you would use for Font Awesome icons. You can use the directive as followed: ``` @icon('{style} {icon} {optional addtitonal classes},{optional title}') ``` ### Examples [](#examples) Usage in a Blade view: ``` {{-- Plain icon --}} @icon('fas fa-download') {{-- Icon with additional size class --}} @icon('fas fa-download fa-5x') {{-- And here with an additional title --}} @icon('fas fa-download,Download button') @icon('fas fa-download fa-5x,Download button') ``` Usage in a Controller method or normal PHP code: ``` $icon = new Hebinet\SvgIcons\Icon('fas fa-download'); $iconWithAddClass = new Hebinet\SvgIcons\Icon('fas fa-download fa-5x'); $iconWithTitle = new Hebinet\SvgIcons\Icon('fas fa-download,Download Button'); // You can now render the icon to a string and do what ever you want with it $svgContent = $icon->render(); ``` Optionally you can omit the icon string from the constructor and instead provide it in the render method like this ``` $icon = new Hebinet\SvgIcons\Icon(); $svgContent = $icon->render('fas fa-download'); ``` This package also provides an Icon Facade. Unfortunately, the way Facades work, you have to provide the icon string in the render method instead of the constructor. First you have to 'register' the Facade in you app.php file at the end of the alias array like this ``` [ ... 'Icon' => Hebinet\SvgIcons\Facades\Icon::class, ] ``` After that you can use the Facade like this ``` $svgContent = Icon::render('fas fa-check'); ``` Additional Route ---------------- [](#additional-route) If the setting `$config['route']['enabled']` is true (default: true), an additional route will be registered to provide an Url-Based fetch for the SVG Icon Content. With this route you can load the Icon via a normal GET-Operation, so you can use the Icon also in "Non Blade"-Scenarios like Vue-Components. You can use it like this: ``` /svgIcons/{style}/{icon}.svg or /svgIcons/{style}/{icon}.svg?title={title} ``` It will throw an `Symfony\Component\HttpKernel\Exception\NotFoundHttpException` if the requested icon doesn't exist. ### Examples [](#examples-1) ``` // Plain icon /svgIcons/fas/fa-download.svg // And here with an additional title /svgIcons/fas/fa-download.svg?title=Download button ``` Accessibility ------------- [](#accessibility) - `role="img"` is added to the SVG tag by default - `aria-hidden="true"` is added to the SVG tag by default unless a `` is set Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security -------- [](#security) If you discover any security related issues, please email instead of using the issue tracker. License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 31 — LowBetter than 68% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity16 Limited adoption so far Community6 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~69 days Recently: every ~131 days Total 9 Last Release 1923d ago PHP version history (2 changes)v1.0.0PHP ^7.2 v1.3.4PHP ^7.2|^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/99707e710b6f3c5e55b7a9f5197027134d285e4be34045d464581e70fa214060?d=identicon)[hebinet](/maintainers/hebinet) --- Top Contributors [![hebinet](https://avatars.githubusercontent.com/u/24890467?v=4)](https://github.com/hebinet "hebinet (19 commits)") --- Tags blade-directivesfont-awesomelaravelsvg-iconshebinetlaravel-svg-icons ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/hebinet-laravel-svg-icons/health.svg) ``` [![Health](https://phpackages.com/badges/hebinet-laravel-svg-icons/health.svg)](https://phpackages.com/packages/hebinet-laravel-svg-icons) ``` ### Alternatives [roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[illuminate/view The Illuminate View package. 13144.9M1.7k](/packages/illuminate-view)[pressbooks/pressbooks Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS. 44643.1k1](/packages/pressbooks-pressbooks)[moonshine/moonshine Laravel administration panel 1.3k217.1k59](/packages/moonshine-moonshine)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 703141.0k7](/packages/tallstackui-tallstackui)[laravellux/html HTML and Form Builders for the Laravel Framework 35239.2k3](/packages/laravellux-html) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)