Is there a way to specify the size of the SVG viewBox or otherwise size the SVG? For example, I'm using a set of SVG files from https://useiconic.com/open and I'd like to resize them.

Perhaps I'd just do:

@svg('people', ['width' => '15', 'height' => '15']) ?

Accordingly
https://www.deque.com/blog/creating-accessible-svgs/
https://css-tricks.com/accessible-svgs/

We need a simple way to add default "aria-hidden='true'" attribute when icons used just like icons near descriptive texts
And ability to set descriptive title and text inside a svg tag if we need to add some description
for ex.

<x-icon-o-bell  "role"="image">
   <title>Notificatons</title>
</x-icon-o-bell>

or

@svg('heroicon-o-bell', ['class'=>'w-8 h-8', 'role'=>'image', 'a11y-title'=>'Notifications', 'a11y-desc'=>'Show recent notification list'])

Hello,

Is it possible to use this package and render SVG using JS?

@adamwathan: I want to inline the same (quite complex) SVG multiple times on a page so
I can style it differently using page CSS.
Despite gzip I think using a symbol for referencing to the same inlined SVG would be the best approach.
Can I do this with blade-svg? I want to prevent duplicate SVG markup.

Don't work save sprite, failed to open stream: No such file or directory
'spritesheet_path' => 'resources/assets/svg/spritesheet.svg', //not found and not create =(

Related: owenvoke/blade-fontawesome#6

I would love to show SVGs based on a value in a model's attribute.

Here is what I tried:
@svg({{ $user->type }}) which throws an ugly error (syntax error, unexpected '<' (View: ).

Browsing through blade-svg's tests, this use case is not being considered up till now.
I could not find a work around and it might be a nice addition.

The Readme doesn't give me the location to put the svg's

Hi. I usually have different layouts and different icon collections in my projects. Different landing pages use different icon sets.

The way blade-svg package works does not allow the usage of multiple svg spritesheets, so you would need to render icons you are not actually going to use in every page (maybe I am wrong).

I think it would be very convenient if we could pass the location of any sprite sheet from any view, being able to switch icon collections as desired. Sometimes you need a collection of only three icons, for example. It would be nice if we could create and render a spritesheet for only those three icons instead of a big set of svg's.

Thanks in advance.

@svg('icon-ui.checkmark-circle') this works as expected, however <x-icon-ui.checkmark-circle/> does not. I'm sure I'm missing something really simple here 🤷🏻‍♂️

blade-icons.php

<?php

return [

    'sets' => [
        'default' => [
            'path' => 'resources/assets/svg/icons/',
            'prefix' => 'icon',
            'class' => '',
        ],
    ],
    'class' => '',
];

First of all, cool package! Very helpful!

I'm running into one problem and I'm not 100% sure this is a bug or a lack of knowledge on my end. I'd like to give the component a conditional class in AlpineJS, such as:

:class="{ 'text-gray-600': open }"

I haven't had the time yet to dig into this extensively, but I'm guessing this is related to the attribute parsing done in blade-icons. Does anyone have a suggestion how to pass the conditional class to the icon?

Is it possible to automatically create optimised sprite sheets?

For example if you set 'automatic_spritesheet' => true when you use @icon('cog') it builds up a collection of the svgs used, then it prints out the spritesheet after the body, based on only the icons you've picked? So you can have individual .svg files in your asset folder still?

Thanks :)

Thank you Adam for this useful package!
I started using it and I noticed it doesn't allow absolute paths for the svg_path option for example like most other packages do. I wanted to use the public_path() or storage_path() helper to define the path.
A nice bonus would be having the auto discovery functionality from Laravel too.
Would you also accept a PR for such changes?

Hello,

I'm trying to make this work with bootstrap 4 but it does not work properly.

   <div data-toggle="tooltip" title="Tooltip Test">Wallet Balance
        <x-zondicon-question style="width: 15px; margin-left: 2px;" />
    </div>

Hey @adamwathan currently I can not install this package via composer.

That might have to do with this part in the composer file:

 "name": "nothingworks/blade-svg",

Can you maybe make it available and add a line to the readme once it works, so one can just copy it to the cli? Thanks.

Rendered svg icons might benefit from having a default fallback size to prevent them taking the entire screen if stylesheet with .icon definition is blocked or takes time to load.

Not sure how it would work though. Maybe a recommendation to add e.g.

<style>
.icon { height: 1em; }
</style>

directly in html template? 🙂

Hey, I get the following error when trying to publish the config.

[ErrorException]
array_merge(): Argument #1 is not an array

I get it because of this line:

$config = array_merge(config('blade-svg'), [

This fixes it:

$config = array_merge((array) config('blade-svg'), [

Once I run art vendor:publish --provider="BladeSvg\BladeSvgServiceProvider" the line can be removed, as now it returns an array.

Hi,

I updated yesterday from the nothingworks/blade-svg package to the blade-ui-kit/blade-icons package and I'm seeing much higher CPU usage on my servers as well as a very large number of php slow log entries relating to the package on every single request.

I am using the owenvoke/blade-fontawesome add on.

It seems when there is a large number of icons, for instance the fontawesome package provides around 1,500 icons, it loads every single file in the filesystem on every request.

Looking at https://github.com/blade-ui-kit/blade-icons/blob/main/src/Factory.php#L68-L81 it loads all the files in the filesystem (whether or not they're used) on every page request:

But the previous package would only load them as they're used https://github.com/blade-ui-kit/blade-icons/blob/v0.3.4/src/SvgFactory.php#L105

As an example of the slow log I'm seeing on every request:

[07-Aug-2020 02:32:07]  [pool www] pid 8233
script_filename = /srv/public/index.php
[0x00007f5fa7616e40] hasChildren() /srv/vendor/symfony/finder/Iterator/ExcludeDirectoryFilterIterator.php:76
[0x00007f5fa7616dd0] hasChildren() /srv/vendor/symfony/finder/Iterator/SortableIterator.php:91
[0x00007f5fa7616d80] next() /srv/vendor/symfony/finder/Iterator/SortableIterator.php:91
[0x00007f5fa7616d30] next() /srv/vendor/symfony/finder/Iterator/SortableIterator.php:91
[0x00007f5fa7616cc0] iterator_to_array() /srv/vendor/symfony/finder/Iterator/SortableIterator.php:91
[0x00007f5fa7616c40] getIterator() /srv/vendor/symfony/finder/Finder.php:772
[0x00007f5fa7616b10] searchInDirectory() /srv/vendor/symfony/finder/Finder.php:614
[0x00007f5fa7616a60] getIterator() /srv/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php:460
[0x00007f5fa76169f0] iterator_to_array() /srv/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php:460
[0x00007f5fa7616970] allFiles() /srv/vendor/blade-ui-kit/blade-icons/src/Factory.php:71
[0x00007f5fa76168b0] registerComponents() /srv/vendor/blade-ui-kit/blade-icons/src/BladeIconsServiceProvider.php:49
[0x00007f5fa7616830] BladeUI\Icons\{closure}() /srv/vendor/laravel/framework/src/Illuminate/Container/Container.php:1141
[0x00007f5fa7616790] fireCallbackArray() /srv/vendor/laravel/framework/src/Illuminate/Container/Container.php:1105
[0x00007f5fa7616710] fireAfterResolvingCallbacks() /srv/vendor/laravel/framework/src/Illuminate/Container/Container.php:1090
[0x00007f5fa7616690] fireResolvingCallbacks() /srv/vendor/laravel/framework/src/Illuminate/Container/Container.php:711
[0x00007f5fa76165b0] resolve() /srv/vendor/laravel/framework/src/Illuminate/Foundation/Application.php:796
[0x00007f5fa7616510] resolve() /srv/vendor/laravel/framework/src/Illuminate/Container/Container.php:637
[0x00007f5fa7616490] make() /srv/vendor/laravel/framework/src/Illuminate/Foundation/Application.php:781
[0x00007f5fa7616400] make() /srv/vendor/laravel/framework/src/Illuminate/Container/Container.php:1284
[0x00007f5fa7616390] offsetGet() unknown:0

I've had to revert this package upgrade and move back to the deprecated old package which immediately solved the slowlog and cpu issues.

Hi,

I am wondering if I am going about this the wrong way.

I have SVGs with embedded styles (<style>...</style>) but I cannot use them if I am including them inside a Vue app as Vue will complain:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

I have found the way to counter this would be to change the <style> tags to <svg:style> inside my SVGs. However, the following function will place my given SVG class in both elements:
https://github.com/adamwathan/blade-svg/blob/600269d60efe52bf9fc2cc610b21744cd69425df/src/Svg.php#L55-L62

Shouldn't the function return :
return \Illuminate\Support\Str::replaceFirst('<svg', '<svg ' . $this->renderAttributes(), $this->factory->getSvg($this->imageName));
?

Or maybe I am doing it wrong.

Thanks.

Not in SVG spec nor SVG2 spec too.

What matches with alt for SVG is the <title> tag as a child of the <svg> tag.

So, this:

    @icon('cog', 'icon-lg', ['alt' => 'Gear icon']) Settings

should render as:

    <svg class="icon icon-lg">
        <title>Gear icon</title>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#zondicon-cog"></use>
    </svg>

instead of:

    <svg class="icon icon-lg" alt="Gear icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#zondicon-cog"></use>
    </svg>

There’s more resource about VG accessibility in this Gist by @davidhund and in the comments. Haven’t read it yet.

I’m not familiar with issues and pull requests, but if I dig into it, I'll make one to contribute.

Any tips on how to fade transition between two svgs "icon-neutral.svg" and "icon-hover.svg"?

How can i overide height and width of svg. e.g

Help me out in syntax. Thanks

Just a quick question since I am getting File does not exist-errors when trying to use the @svg-directive like this:

@svg('icons/cards/info-blue')

Do all the files have to sit in the same directory or is there any way I can use nested / multi-level paths?

Many thanks for your efforts with Blade SVG, very much appreciated!

Hi,

could you change line 52 in IconFactory.php from
display:none
to
height: 0; width: 0; position: absolute; visibility: hidden;

There are some known issues when using gradients inside the sprite.

See also:
http://stackoverflow.com/questions/24806913/how-can-i-refer-to-an-internal-gradient-definition-inside-an-svg-sprite-symbol

Thanks!

Hello.
I was thinking about the package, when we're talking about SVG (scalable vector graphics), not every SVG is an "icon", it could be just a simple graphic or whatever.
Perhaps shouldn't we consider renaming the helper @icon to @svg? Wouldn't it be better and more semantic flexible to the package? (I know we go the svg_icon as well, but my complaining is about the word "icon".
What do you guys thinks?
Cheers!

Hello, thanks for this amazing package!

I see that we can customize the path for a given icon set, but what if the icons are not stored on the application server?

In our case, they would be served from our remote S3 storage.

In addition to path, are we able to define the URL?

Add a component for people wanting to use the <x-icon name="bell"> syntax.

Would it be possible to provide default classes for icons provided by packages? For example, when I want to use brunocfalcao/blade-feather-icons, and want to set the default class in the config/blade-icons.php like this:

'feathericons' => [
    'class' => 'w-10 h-10'
]

It seems to override the set provided by the package, so I get the error:

Undefined index: path

The use case would be that I'm using different sets and packages for different purposes, and I would avoid repetition if I could set the default size.

In BladeIconsServiceProvider.php line 34:

Trying to access array offset on value of type null

Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1

Installation failed, reverting ./composer.json to its original content.

Hi guys,

After some fiddling and reading these links https://calebporzio.com/using-inline-svgs-in-vue-compoments/ and https://laravel-mix.com/extensions/vue-svgicon I thought it could be easier if you just import the generated HTML into you component.

In blade view:

@php
$svgIcon = svg_image('cog', 'icon icon-lg');
@endphp

<product icon="{{$svgIcon->renderInline() }} "></product>

Please note the missing : before icon.

In Vue:

<template>
    <div v-html="icon"></div>
</template>

 export default {
        props: ['icon'],
}

Is it an idea to document this approach for Vue in the readme?

Hi,

I'm testing the next-version branch, and I can't figure out how to use the Blade components.

Environment:

• Laravel version: 7.12.0
• PHP version: 7.4.3
• No config cache

My blade-icons.php config file:

return [
    'sets' => [
        'default' => [
            'path' => 'resources/svg',
            'prefix' => 'icon',
            'class' => '',
        ],
    ],
    'class' => '',
];

I have an account.svg inside of resources/svg.

@svg('account') {{-- renders correctly --}}

{{ svg('account') }} {{-- renders correctly --}}

<x-icon-account/>

{{--

Facade\Ignition\Exceptions\ViewException
Unable to locate a class or view for component [icon-account].

--}}

Am I missing something ?

I'm having difficulty showing an inline SVG for a path and filename not in the /svg directory

Could we perhaps have a way of avoiding using the svg directory and passing a directory and SVG filename to the getSvg function like this:

   public function getSvgUrl($name)
    {
        return $this->svgCache->get($name, function () use ($name) {
            return $this->svgCache[$name] = trim($this->files->get(public_path($name)));
        });
    }

I've got an error at:

vendor/nothingworks/blade-svg/src/Svg.php:37

Laravel 6 has deprecated string helper, you should use \Illuminate\Support\Str::snake instead.

Hello.
It seems the service provider is not publishing the config file at config/ dir for me. Laravel 5.4.
Any suspects why? Is that occurring to anyone else as well or just me?

I can add default classes in the config, but what about default attributes?

At the moment I'm having to type out the same attributes each time, eg:

@svg('my-icon', 'text-red', ['aria-hidden' => 'true', 'viewBox' => '0 0 24 24'])

Is it possible to add markup in a SVG body, like blade components?

@svg('some.svg')
Extra markup that goes into SVG.
@endsvg

I'm using a variable placeholder for the icon, but it obviously renders as a string. How can I get it to execute properly?

@php $svg = '' @endphp

@if($service == 'Facebook')
@php $svg = "@svg('facebook', 'icon-facebook')" @endphp
@elseif($service == 'Twitter')
@php $svg = "@svg('twitter', 'icon-twitter')" @endphp
@endif

<li>
<a target="_blank" rel="noopener noreferrer" href={!! $url !!}><span class="sr-only">{!! $service !!}</span>{!! $svg !!}</a>
</li>

I haven't been able to figure out why, but as soon as I install this package and make any change to my view (or do php artisan view:clear as well), it no longer recognizes spatie/laravel-permission directives.

My view just prints out the directives as text, like this:

@hasanyrole('Administrador|Ventas')
<x-menu.menu-item>
@endhasanyrole

I'm using Laravel 7.16

Hey @adamwathan,

can you tag a release? Seems like its pretty stable, right?

The helper (and incidentally the blade directive) don't seem to be able to see another icon set than default.

Proposition:

• Add the ability to override the default set key.

• Make a way to prefix in the first parameter of svg($name) which set to actually look in, overriding default.
  eg. @svg('other-set.subfolder.filename', ...)

If this is already possible; I might be missing documentation on how to force a certain set to be used in this helper.

Hi Adam. I would like to have multiple fallbacks for icons that are either user/programatically generated with optional fallbacks where the existance of the icon by name is not always known.

This does what I need and may be of interest to you or your users...(only tested in my case* )
These changes will enable an array to be used as the icon name. The getSVG function loops the array returning the first 'found' icon. if none of the icons are found it returns the config default icon.

*how I use it (I've added a few fallbacks for example):

{{ svg_icon(['brands/'.$item["brand_icon"],'light/thumbtack','solid/thumbtack'])->class('icon sm') }}

config.blade-svg

    /*
    |--------------------------------------------------------------------------
    | Fallback Filename (not extension)
    |--------------------------------------------------------------------------
    |
    | If the specified svg file does not exist then it will fallback to this file...
    |
    */

    'svg_default_name' => 'fallback',

SvgFactory

public function svgDefaultName()
    {  
        return $this->config->get('svg_default_name', '');
    }

public function getSvg($names)
    {
        $names = (array) $names;
        $names[] = $this->svgDefaultName();
        $name = $names[0];
        
        return $this->svgCache->get($name, function () use ( $names) {
            
            foreach($names as $fallback){
                $path = sprintf('%s/%s.svg', rtrim($this->svgPath()), str_replace('.', '/', $fallback));
                if ($this->files->exists($path))
                {
                    $name = $fallback;
                    return $this->svgCache[$name] = trim($this->files->get(sprintf('%s/%s.svg', rtrim($this->svgPath()), str_replace('.', '/', $name))));
                }
            }

        });
    }

I have a project that has a ton of svg's. So I put them in svg/{pagename}/*.

In normal Laravel fashion, I'd assume something like this would work: @icon('pricing.ic-api') but it fails. You have to fall back to the slash @icon('pricing/ic-api')

You should fix this so I can sleep well this weekend, which always to be my birthday weekend. No pressure, but I think you'd feel bad if I didn't sleep for 48 hours and then was angry with my family.

Think of the children Adam!

Please see #50 and provide feedback on it if you can 🙏

Thanks for this directive! and I only want to inline svgs :D

so I follow all the steps, I add the svg here:

and I'm using it like:
@svg('search', 'test-icon')

but I get this error..

File does not exist at path /Users/x1c0/projects/laravel/search.svg
(View: /Users/x1c0/projects/laravel/resources/views/layout/header.blade.php)

thanks for any help in advance!

On sharing host, the blade Svg doesn't render, i don't know if it does not allow me to run artisan on terminal, php artisan vendor:publish --provider="BladeSvg\BladeSvgServiceProvider" , so i created my copy the config file from my localhost. Then the bladesvg didn't render.

Hello,

How can I set a fallback to @svg if it can't find the specified icon?

This is what I did:

@php
  if (!file_exists(base_path(config('blade-svg.svg_path')).$item['icone'])) {
    $item['icone'] = 'icon-circle';
  }
@endphp

• Library Version: 0.4.0
• Laravel Version: 7.17.2
• PHP Version: 7.4.6 @ Ubuntu 18.04 WSL2

Description:

When adding a custom class, the default classes are not added anymore.
Note that this worked perfectly in the preview build you had previously @ Adam's blade-svg.

Readme says:
You can also pass classes to your icon components (default classes will be applied as well):
<x-icon-camera class="icon-lg"/>

Steps To Reproduce:

<x-icon-calendar-lock />
returns:
<svg class="icon sl-micro" ... >...</svg>

but,
<x-icon-calendar-lock class="text-orange-400" />
returns:
<svg class="text-orange-400" ... >...</svg>

What I expected:
<svg class="icon sl-micro text-orange-400" ... >...</svg>

Partial content of resources/svg/icon/streamline-micro/calendar-lock.svg (!; licensing):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 10 10">
  <g>
    <path .... />
  </g>
</svg>

My Config (blade-icons.php)

<?php
return [
    'sets' => [
        'streamline-micro' => [
            'path' => 'resources/svg/icon/streamline-micro',
            'prefix' => 'icon', // 'icon-sl-micro',
            'class' => 'sl-micro'
        ],

        'streamline-light' => [
            'path' => 'resources/svg/icon/streamline-light',
            'prefix' => 'icon-sl-light',
            'class' => 'sl-light'
        ],

    ],
    'class' => 'icon',
];

Hey, first of all; thanks for this package!

I was wondering why my SVG logo was not being rendered as an inline image, as your default config clearly states 'inline' => true.

Turns out, your SvgFactory has an additional $config that is not being populated with the out-of-the-box config.

Simply publishing the config works as a "fix".

It looks like the config that is used in the package gets locked in during the register method of the ServiceProvider. I would like to alter the svg_path in my Middleware to allow for different locations for different tenants but since it is set in the ServiceProvider any changes I make to it in my Middleware are disregarded.

If the svg itself has the class attribute already. svg_image('Foo') will overwrite the original class attribute with an empty value.

Thinking of a svg that can be used at multiple places, I have to specify the class name every time, which means it's hard to change when I want to change the class name of the svg, because I have to change all the args of the svg_image one by one.