https://github.com/tomhatzer/blade-svg-origin
A package to include svg icons directly into your blade views without copy&paste
https://github.com/tomhatzer/blade-svg-origin
Last synced: 5 months ago
JSON representation
A package to include svg icons directly into your blade views without copy&paste
- Host: GitHub
- URL: https://github.com/tomhatzer/blade-svg-origin
- Owner: tomhatzer
- Fork: true (driesvints/blade-icons)
- Created: 2021-04-18T14:07:50.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-18T14:24:23.000Z (about 5 years ago)
- Last Synced: 2025-10-11T14:07:10.999Z (9 months ago)
- Language: PHP
- Homepage:
- Size: 115 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## This is an unmaintained fork of the original blade-svg repository by adamwathan made compatible with Laravel 8.
# Blade SVG
Easily inline SVG images in your Blade templates.
## Installation
You can install this package via Composer by running this command in your terminal in the root of your project:
`composer require tomhatzer/blade-svg-origin`
## Getting started
The package's service provider will automatically register itself.
Publish the Blade SVG config file:
```
php artisan vendor:publish --provider="BladeSvg\BladeSvgServiceProvider"
```
### Configuration
Inside `config/blade-svg.php`, you can specify any default CSS classes you'd like to be applied to your SVG images using the `class` option:
```php
'icon', // Add the `icon` class to every SVG when rendered
// ...
];
```
You can specify multiple classes by separating them with a space, just like you would in an HTML class attribute:
```php
'icon inline-block',
// ...
];
```
## Basic usage
To insert an SVG in your template, simply use the `@svg` Blade directive, passing the name of the SVG and optionally any additional classes:
```html
@svg('cog', 'icon-lg') Settings
Settings
```
To add additional attributes to the rendered SVG tag, pass an associative array as the third parameter:
```html
@svg('cog', 'icon-lg', ['id' => 'settings-icon']) Settings
Settings
```
If you have attributes to declare but no additional class, you can pass an associative array as the second parameter instead:
```html
@svg('cog', ['id' => 'settings-icon']) Settings
Settings
```
If you'd like to _override_ the default class name, specify a class in the attributes array:
```html
@svg('cog', ['class' => 'overridden']) Settings
Settings
```
If you'd like to add an attribute that needs no value, just specify it without a key:
```html
@svg('cog', ['data-foo']) Settings
Settings
```
If you'd like, you can use the `svg_image` helper directly to expose a fluent syntax for setting SVG attributes:
```html
{{ svg_image('cog')->id('settings-icon')->dataFoo('bar')->dataBaz() }} Settings
Settings
```
## Using a spritesheet
I recommend [just rendering icons inline](https://css-tricks.com/pretty-good-svg-icon-system/) because it's really simple, has a few advantages over spritesheets, and has no real disadvantages, but if you *really* want to use a spritesheet, who am I to stop you?
So if you'd rather use a sprite sheet instead of rendering your SVGs inline, start by configuring the path to your spritesheet in the `blade-svg` config file:
```php
'resources/assets/svg/spritesheet.svg',
// ...
];
```
If the ID attributes of the SVGs in your spritesheet have a prefix, you can configure that using the `sprite_prefix` option:
```php
'zondicon-',
// ...
];
```
Next, set the `inline` option to `false` which will tell Blade SVG to render icons using the spritesheet by default instead of inlining the entire SVG:
```php
false,
// ...
];
```
Make sure you render the hidden sprite sheet somewhere at the end of any layouts that use SVGs by using the `svg_spritesheet()` helper:
```html
{{ svg_spritesheet() }}
```
You can force an SVG to reference the sprite sheet even if you are rendering inline by default by using the fluent syntax and chaining the `sprite` method:
```html
{{ svg_image('cog', 'icon icon-lg')->sprite() }} Settings
Settings
```
Similarly, you can force an SVG to render inline even if you are using sprites by default by chaining the `inline` method:
```html
{{ svg_image('cog', 'icon icon-lg')->inline() }} Settings
Settings
```