diff --git a/config/blade-svg.php b/config/blade-svg.php
index b8e3d5c..e433eca 100644
--- a/config/blade-svg.php
+++ b/config/blade-svg.php
@@ -4,24 +4,24 @@
/*
|--------------------------------------------------------------------------
- | Icon Path
+ | SVG Path
|--------------------------------------------------------------------------
|
- | This value is the path to the directory of individual SVG icons. This
+ | This value is the path to the directory of individual SVG files. This
| path is then resolved internally. Please ensure that this value is
| set relative to the root directory and not the public directory.
|
*/
- 'icon_path' => 'path/to/icons',
+ 'svg_path' => 'path/to/svgs',
/*
|--------------------------------------------------------------------------
| Spritesheet Path
|--------------------------------------------------------------------------
|
- | If you would rather have one spritesheet than a lot of individual svg
- | files, you may specify a path to a spritesheet. The icons are then
+ | If you would rather have one spritesheet than a lot of individual SVG
+ | files, you may specify a path to a spritesheet. The SVG images are
| extracted from this spritesheet to be rendered out individually.
|
*/
@@ -46,9 +46,9 @@
| Inline Rendering
|--------------------------------------------------------------------------
|
- | This value will determine whether or not the icon must be rendered as
- | an SVG element or if it must be referenced on the spritesheet. The
- | icon, if this value is false, will be rendered with a 'use' tag.
+ | This value will determine whether or not the image should be rendered
+ | as an SVG element or if it must be referenced on the spritesheet. The
+ | SVG, if this value is false, will be rendered with a 'use' tag.
|
| Default: false
|
@@ -61,7 +61,7 @@
| Optional Class
|--------------------------------------------------------------------------
|
- | If you would like to have CSS classes applied to your icons, you must
+ | If you would like to have CSS classes applied to your SVGs, you must
| specify them here. Much like how you would define multiple classes
| in an HTML attribute, you may separate each class using a space.
|
diff --git a/readme.md b/readme.md
index a5a3ff7..1882ce4 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
# Blade SVG
-Easily use SVG icons in your Blade templates, either as inline SVG or using SVG sprites.
+Easily use SVG images in your Blade templates, either as inline SVG or using SVG sprites.
## Installation
@@ -34,7 +34,7 @@ Publish the Blade SVG config file:
php artisan vendor:publish --provider="BladeSvg\BladeSvgServiceProvider"
```
-If you want to use the sprite sheet instead of rendering every icon inline, make sure you render the hidden sprite sheet somewhere at the end of any layouts that are going to use icons using the `svg_spritesheet()` helper:
+If you want to use the sprite sheet instead of rendering every image inline, make sure you render the hidden sprite sheet somewhere at the end of any layouts that are going to use SVGs using the `svg_spritesheet()` helper:
```
@@ -52,42 +52,42 @@ If you want to use the sprite sheet instead of rendering every icon inline, make
### Configuration
-Inside `config/blade-svg.php` specify the location of your spritesheet and the path to your individual icons:
+Inside `config/blade-svg.php` specify the location of your spritesheet and the path to your individual SVG images:
```php
'resources/assets/svg/sprite.svg',
- 'icon_path' => 'resources/assets/svg/icons',
+ 'svg_path' => 'resources/assets/svg/icons',
// ...
];
```
> These paths are resolved internally using the `base_path()` helper, so specify them relative to the root of your project.
-You can also specify whether you'd like icons to be rendered inline by default, or to reference the icon from the sprite sheet:
+You can also specify whether you'd like SVGs to be rendered inline by default, or to reference the SVG from the sprite sheet:
```php
true, // Render the full icon SVG inline by default
+ 'inline' => true, // Render the full SVG inline by default
// or...
- 'inline' => false, // Reference the sprite sheet and render the icon with a `use` tag
+ 'inline' => false, // Reference the sprite sheet and render the image with a `use` tag
// ...
];
```
-You can specify any default CSS classes you'd like to be applied to your icons using the `class` option:
+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 icon when rendered
+ 'class' => 'icon', // Add the `icon` class to every SVG when rendered
// ...
];
```
@@ -104,7 +104,7 @@ return [
];
```
-If the ID attributes of the icons in your spritesheet have a prefix, you can configure that using the `sprite_prefix` option:
+If the ID attributes of the SVGs in your spritesheet have a prefix, you can configure that using the `sprite_prefix` option:
```php
- @icon('cog', 'icon-lg') Settings
+ @svg('cog', 'icon-lg') Settings
@@ -138,7 +138,7 @@ To add additional attributes to the rendered SVG tag, pass an associative array
```html
- @icon('cog', 'icon-lg', ['alt' => 'Gear icon']) Settings
+ @svg('cog', 'icon-lg', ['alt' => 'Gear icon']) Settings
@@ -154,7 +154,7 @@ If you have attributes to declare but no additional class, you can pass an assoc
```html
- @icon('cog', ['alt' => 'Gear icon']) Settings
+ @svg('cog', ['alt' => 'Gear icon']) Settings
@@ -170,7 +170,7 @@ If you'd like to _override_ the default class name, specify a class in the attri
```html
- @icon('cog', ['class' => 'overridden']) Settings
+ @svg('cog', ['class' => 'overridden']) Settings
@@ -186,7 +186,7 @@ If you'd like to add an attribute that needs no value, just specify it without a
```html
- @icon('cog', ['data-foo']) Settings
+ @svg('cog', ['data-foo']) Settings
@@ -198,11 +198,11 @@ If you'd like to add an attribute that needs no value, just specify it without a
```
-If you'd like, you can use the `svg_icon` helper directly to expose a fluent syntax for setting icon attributes:
+If you'd like, you can use the `svg_image` helper directly to expose a fluent syntax for setting SVG attributes:
```html
- {{ svg_icon('cog')->alt('Alt text')->dataFoo('bar')->dataBaz() }} Settings
+ {{ svg_image('cog')->alt('Alt text')->dataFoo('bar')->dataBaz() }} Settings
@@ -214,11 +214,11 @@ If you'd like, you can use the `svg_icon` helper directly to expose a fluent syn
```
-You can force an icon to reference the sprite sheet even if you are rendering inline by default by using the fluent syntax and chaining the `sprite` method:
+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_icon('cog', 'icon-lg')->sprite() }} Settings
+ {{ svg_image('cog', 'icon-lg')->sprite() }} Settings
@@ -230,11 +230,11 @@ You can force an icon to reference the sprite sheet even if you are rendering in
```
-Similarly, you can force an icon to render inline even if you are using sprites by default by chaining the `inline` method:
+Similarly, you can force an SVG to render inline even if you are using sprites by default by chaining the `inline` method:
```html
- {{ svg_icon('cog', 'icon-lg')->inline() }} Settings
+ {{ svg_image('cog', 'icon-lg')->inline() }} Settings
diff --git a/src/BladeSvgServiceProvider.php b/src/BladeSvgServiceProvider.php
index bf1a23e..b1277c2 100644
--- a/src/BladeSvgServiceProvider.php
+++ b/src/BladeSvgServiceProvider.php
@@ -2,14 +2,15 @@
namespace BladeSvg;
-use BladeSvg\IconFactory;
+use BladeSvg\SvgFactory;
+use Illuminate\Support\Collection;
use Illuminate\Support\ServiceProvider;
class BladeSvgServiceProvider extends ServiceProvider
{
public function boot()
{
- app(IconFactory::class)->registerBladeTag();
+ app(SvgFactory::class)->registerBladeTag();
$this->publishes([
__DIR__.'/../config/blade-svg.php' => config_path('blade-svg.php'),
@@ -18,12 +19,13 @@ public function boot()
public function register()
{
- $this->app->singleton(IconFactory::class, function () {
- $config = array_merge(config('blade-svg', []), [
- 'spritesheet_path' => config('blade-svg.spritesheet_path') ? base_path(config('blade-svg.spritesheet_path')) : null,
- 'icon_path' => config('blade-svg.icon_path') ? base_path(config('blade-svg.icon_path')) : null,
- ]);
- return new IconFactory($config);
+ $this->app->singleton(SvgFactory::class, function () {
+ $config = Collection::make(config('blade-svg', []))->merge([
+ 'spritesheet_path' => config('blade-svg.spritesheet_path'),
+ 'svg_path' => config('blade-svg.svg_path', config('blade-svg.icon_path')),
+ ])->map('base_path')->all();
+
+ return new SvgFactory($config);
});
}
}
diff --git a/src/Icon.php b/src/Svg.php
similarity index 86%
rename from src/Icon.php
rename to src/Svg.php
index f545d51..dc1ed0e 100644
--- a/src/Icon.php
+++ b/src/Svg.php
@@ -6,16 +6,16 @@
use Illuminate\Support\HtmlString;
use Illuminate\Contracts\Support\Htmlable;
-class Icon implements Htmlable
+class Svg implements Htmlable
{
- private $icon;
+ private $imageName;
private $renderMode;
private $factory;
private $attrs = [];
- public function __construct($icon, $renderMode, $factory, $attrs = [])
+ public function __construct($imageName, $renderMode, $factory, $attrs = [])
{
- $this->icon = $icon;
+ $this->imageName = $imageName;
$this->renderMode = $renderMode;
$this->factory = $factory;
$this->attrs = $attrs;
@@ -56,7 +56,7 @@ public function renderInline()
return str_replace(
'renderAttributes()),
- $this->factory->getSvg($this->icon)
+ $this->factory->getSvg($this->imageName)
);
}
@@ -65,7 +65,7 @@ public function renderFromSprite()
return vsprintf('', [
$this->renderAttributes(),
$this->factory->spritesheetUrl(),
- $this->factory->spriteId($this->icon)
+ $this->factory->spriteId($this->imageName)
]);
}
diff --git a/src/IconFactory.php b/src/SvgFactory.php
similarity index 76%
rename from src/IconFactory.php
rename to src/SvgFactory.php
index 5b0b58e..207d61c 100644
--- a/src/IconFactory.php
+++ b/src/SvgFactory.php
@@ -8,7 +8,7 @@
use Illuminate\Filesystem\Filesystem;
use Illuminate\Support\Facades\Blade;
-class IconFactory
+class SvgFactory
{
private $files;
private $svgCache;
@@ -28,14 +28,18 @@ public function __construct($config = [], $filesystem = null)
public function registerBladeTag()
{
Blade::directive('icon', function ($expression) {
- return "";
+ return "";
+ });
+
+ Blade::directive('svg', function ($expression) {
+ return "";
});
}
- private function iconPath()
+ private function svgPath()
{
- return $this->config->get('icon_path', function () {
- throw new Exception('No icon_path set!');
+ return $this->config->get('svg_path', function () {
+ throw new Exception('No svg_path set!');
});
}
@@ -61,7 +65,7 @@ public function spritesheet()
);
}
- public function icon($name, $class = '', $attrs = [])
+ public function svg($name, $class = '', $attrs = [])
{
if (is_array($class)) {
$attrs = $class;
@@ -72,12 +76,12 @@ public function icon($name, $class = '', $attrs = [])
'class' => $this->buildClass($class),
], $attrs);
- return new Icon($name, $this->renderMode(), $this, $attrs);
+ return new Svg($name, $this->renderMode(), $this, $attrs);
}
- public function spriteId($icon)
+ public function spriteId($svgName)
{
- return "{$this->spritePrefix()}{$icon}";
+ return "{$this->spritePrefix()}{$svgName}";
}
private function spritePrefix()
@@ -98,7 +102,7 @@ private function buildClass($class)
public function getSvg($name)
{
return $this->svgCache->get($name, function () use ($name) {
- return $this->svgCache[$name] = trim($this->files->get(sprintf('%s/%s.svg', rtrim($this->iconPath()), str_replace('.', '/', $name))));
+ return $this->svgCache[$name] = trim($this->files->get(sprintf('%s/%s.svg', rtrim($this->svgPath()), str_replace('.', '/', $name))));
});
}
}
diff --git a/src/helpers.php b/src/helpers.php
index f585939..fb19960 100644
--- a/src/helpers.php
+++ b/src/helpers.php
@@ -1,17 +1,27 @@
spritesheet();
+ return app(SvgFactory::class)->spritesheet();
+ }
+}
+
+if (! function_exists('svg_image')) {
+ function svg_image($icon, $class = '', $attrs = [])
+ {
+ return app(SvgFactory::class)->svg($icon, $class, $attrs);
}
}
if (! function_exists('svg_icon')) {
+ /**
+ * @deprecated Use `svg_image`
+ */
function svg_icon($icon, $class = '', $attrs = [])
{
- return app(IconFactory::class)->icon($icon, $class, $attrs);
+ return app(SvgFactory::class)->svg($icon, $class, $attrs);
}
}
diff --git a/tests/IconFactoryTest.php b/tests/SvgFactoryTest.php
similarity index 67%
rename from tests/IconFactoryTest.php
rename to tests/SvgFactoryTest.php
index 714e06b..a891903 100644
--- a/tests/IconFactoryTest.php
+++ b/tests/SvgFactoryTest.php
@@ -1,15 +1,15 @@
__DIR__.'/resources/sprite.svg']);
+ $factory = new SvgFactory(['spritesheet_path' => __DIR__.'/resources/sprite.svg']);
$result = $factory->spritesheet();
$expected = sprintf('
%s
', file_get_contents(__DIR__.'/resources/sprite.svg'));
$this->assertEquals($expected, (string) $result);
@@ -18,8 +18,8 @@ public function can_render_spritesheet()
/** @test */
public function icons_are_rendered_from_spritesheet_by_default()
{
- $factory = new IconFactory(['class' => 'icon']);
- $result = $factory->icon('arrow-thick-up')->toHtml();
+ $factory = new SvgFactory(['class' => 'icon']);
+ $result = $factory->svg('arrow-thick-up')->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -27,8 +27,8 @@ public function icons_are_rendered_from_spritesheet_by_default()
/** @test */
public function icons_are_given_the_icon_class_by_default()
{
- $factory = new IconFactory();
- $result = $factory->icon('arrow-thick-up')->toHtml();
+ $factory = new SvgFactory();
+ $result = $factory->svg('arrow-thick-up')->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -36,8 +36,8 @@ public function icons_are_given_the_icon_class_by_default()
/** @test */
public function can_render_icon_from_spritesheet()
{
- $factory = new IconFactory(['inline' => false, 'class' => 'icon']);
- $result = $factory->icon('arrow-thick-up')->toHtml();
+ $factory = new SvgFactory(['inline' => false, 'class' => 'icon']);
+ $result = $factory->svg('arrow-thick-up')->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -45,8 +45,8 @@ public function can_render_icon_from_spritesheet()
/** @test */
public function can_render_inline_icon()
{
- $factory = new IconFactory(['inline' => true, 'class' => 'icon', 'icon_path' => __DIR__.'/resources/icons/']);
- $result = $factory->icon('arrow-thick-up')->toHtml();
+ $factory = new SvgFactory(['inline' => true, 'class' => 'icon', 'svg_path' => __DIR__.'/resources/icons/']);
+ $result = $factory->svg('arrow-thick-up')->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -54,8 +54,8 @@ public function can_render_inline_icon()
/** @test */
public function can_render_icon_with_additional_classes()
{
- $factory = new IconFactory();
- $result = $factory->icon('arrow-thick-up', 'icon-lg inline-block')->toHtml();
+ $factory = new SvgFactory();
+ $result = $factory->svg('arrow-thick-up', 'icon-lg inline-block')->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -63,8 +63,8 @@ public function can_render_icon_with_additional_classes()
/** @test */
public function can_specify_additional_attributes_as_an_array()
{
- $factory = new IconFactory();
- $result = $factory->icon('arrow-thick-up', 'icon-lg', ['alt' => 'Alt text', 'id' => 'arrow-icon'])->toHtml();
+ $factory = new SvgFactory();
+ $result = $factory->svg('arrow-thick-up', 'icon-lg', ['alt' => 'Alt text', 'id' => 'arrow-icon'])->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -72,8 +72,8 @@ public function can_specify_additional_attributes_as_an_array()
/** @test */
public function can_skip_class_parameter()
{
- $factory = new IconFactory();
- $result = $factory->icon('arrow-thick-up', ['alt' => 'Alt text', 'id' => 'arrow-icon'])->toHtml();
+ $factory = new SvgFactory();
+ $result = $factory->svg('arrow-thick-up', ['alt' => 'Alt text', 'id' => 'arrow-icon'])->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -81,8 +81,8 @@ public function can_skip_class_parameter()
/** @test */
public function attributes_without_keys_are_used_as_valueless_html_attributes()
{
- $factory = new IconFactory();
- $result = $factory->icon('arrow-thick-up', ['alt' => 'Alt text', 'data-foo'])->toHtml();
+ $factory = new SvgFactory();
+ $result = $factory->svg('arrow-thick-up', ['alt' => 'Alt text', 'data-foo'])->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -90,8 +90,8 @@ public function attributes_without_keys_are_used_as_valueless_html_attributes()
/** @test */
public function specifying_class_as_attribute_overrides_default_class()
{
- $factory = new IconFactory(['class' => 'default']);
- $result = $factory->icon('arrow-thick-up', ['class' => 'overridden'])->toHtml();
+ $factory = new SvgFactory(['class' => 'default']);
+ $result = $factory->svg('arrow-thick-up', ['class' => 'overridden'])->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -99,8 +99,8 @@ public function specifying_class_as_attribute_overrides_default_class()
/** @test */
public function can_chain_additional_attributes()
{
- $factory = new IconFactory();
- $result = $factory->icon('arrow-thick-up')->alt('Alt text')->id('arrow-icon')->toHtml();
+ $factory = new SvgFactory();
+ $result = $factory->svg('arrow-thick-up')->alt('Alt text')->id('arrow-icon')->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -108,8 +108,8 @@ public function can_chain_additional_attributes()
/** @test */
public function camelcase_attributes_are_dash_cased_when_chaining()
{
- $factory = new IconFactory();
- $result = $factory->icon('arrow-thick-up')->dataFoo('bar')->toHtml();
+ $factory = new SvgFactory();
+ $result = $factory->svg('arrow-thick-up')->dataFoo('bar')->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -117,8 +117,8 @@ public function camelcase_attributes_are_dash_cased_when_chaining()
/** @test */
public function can_force_icon_to_render_inline()
{
- $factory = new IconFactory(['inline' => false, 'icon_path' => __DIR__.'/resources/icons/']);
- $result = $factory->icon('arrow-thick-up')->inline()->toHtml();
+ $factory = new SvgFactory(['inline' => false, 'svg_path' => __DIR__.'/resources/icons/']);
+ $result = $factory->svg('arrow-thick-up')->inline()->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -126,8 +126,8 @@ public function can_force_icon_to_render_inline()
/** @test */
public function can_force_icon_to_render_from_spritesheet()
{
- $factory = new IconFactory(['inline' => true, 'class' => 'icon']);
- $result = $factory->icon('arrow-thick-up')->sprite()->toHtml();
+ $factory = new SvgFactory(['inline' => true, 'class' => 'icon']);
+ $result = $factory->svg('arrow-thick-up')->sprite()->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -135,8 +135,8 @@ public function can_force_icon_to_render_from_spritesheet()
/** @test */
public function can_specify_an_id_prefix_for_sprited_icons()
{
- $factory = new IconFactory(['inline' => false, 'class' => 'icon', 'sprite_prefix' => 'icon-']);
- $result = $factory->icon('arrow-thick-up')->toHtml();
+ $factory = new SvgFactory(['inline' => false, 'class' => 'icon', 'sprite_prefix' => 'icon-']);
+ $result = $factory->svg('arrow-thick-up')->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}
@@ -146,10 +146,10 @@ public function inline_icons_are_cached()
{
$svgStub = '';
$files = Mockery::spy(Filesystem::class, ['get' => $svgStub]);
- $factory = new IconFactory(['inline' => true, 'icon_path' => __DIR__.'/resources/icons/'], $files);
+ $factory = new SvgFactory(['inline' => true, 'svg_path' => __DIR__.'/resources/icons/'], $files);
- $resultA = $factory->icon('arrow-thick-up')->toHtml();
- $resultB = $factory->icon('arrow-thick-up')->toHtml();
+ $resultA = $factory->svg('arrow-thick-up')->toHtml();
+ $resultB = $factory->svg('arrow-thick-up')->toHtml();
$expected = '';
$this->assertEquals($expected, $resultA);
@@ -160,8 +160,8 @@ public function inline_icons_are_cached()
/** @test */
public function can_render_inline_icons_from_nested_folders_with_dot_notation()
{
- $factory = new IconFactory(['inline' => true, 'class' => 'icon', 'icon_path' => __DIR__.'/resources/icons/']);
- $result = $factory->icon('foo.bar.arrow-thick-down')->toHtml();
+ $factory = new SvgFactory(['inline' => true, 'class' => 'icon', 'svg_path' => __DIR__.'/resources/icons/']);
+ $result = $factory->svg('foo.bar.arrow-thick-down')->toHtml();
$expected = '';
$this->assertEquals($expected, $result);
}