{"id":37232053,"url":"https://github.com/tomhatzer/blade-svg-origin","last_synced_at":"2026-01-15T03:47:11.249Z","repository":{"id":57071389,"uuid":"359160661","full_name":"tomhatzer/blade-svg-origin","owner":"tomhatzer","description":"A package to include svg icons directly into your blade views without copy\u0026paste","archived":false,"fork":true,"pushed_at":"2021-04-18T14:24:23.000Z","size":118,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-11T14:07:10.999Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"driesvints/blade-icons","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomhatzer.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-18T14:07:50.000Z","updated_at":"2025-04-18T07:26:47.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/tomhatzer/blade-svg-origin","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/tomhatzer/blade-svg-origin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhatzer%2Fblade-svg-origin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhatzer%2Fblade-svg-origin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhatzer%2Fblade-svg-origin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhatzer%2Fblade-svg-origin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomhatzer","download_url":"https://codeload.github.com/tomhatzer/blade-svg-origin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhatzer%2Fblade-svg-origin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28417815,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T10:47:48.104Z","status":"ssl_error","status_checked_at":"2026-01-14T10:46:19.031Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-15T03:47:10.618Z","updated_at":"2026-01-15T03:47:11.236Z","avatar_url":"https://github.com/tomhatzer.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"## This is an unmaintained fork of the original blade-svg repository by adamwathan made compatible with Laravel 8.\n\n# Blade SVG\n\nEasily inline SVG images in your Blade templates.\n\n## Installation\n\nYou can install this package via Composer by running this command in your terminal in the root of your project:\n\n`composer require tomhatzer/blade-svg-origin`\n\n## Getting started\n\nThe package's service provider will automatically register itself.\n\nPublish the Blade SVG config file:\n\n```\nphp artisan vendor:publish --provider=\"BladeSvg\\BladeSvgServiceProvider\"\n```\n\n### Configuration\n\nInside `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:\n\n```php\n\u003c?php\n\nreturn [\n    // ...\n    'class' =\u003e 'icon', // Add the `icon` class to every SVG when rendered\n    // ...\n];\n```\n\nYou can specify multiple classes by separating them with a space, just like you would in an HTML class attribute:\n\n```php\n\u003c?php\n\nreturn [\n    // ...\n    'class' =\u003e 'icon inline-block',\n    // ...\n];\n```\n\n## Basic usage\n\nTo insert an SVG in your template, simply use the `@svg` Blade directive, passing the name of the SVG and optionally any additional classes:\n\n```html\n\u003ca href=\"/settings\"\u003e\n    @svg('cog', 'icon-lg') Settings\n\u003c/a\u003e\n\n\u003c!-- Renders.. --\u003e\n\u003ca href=\"/settings\"\u003e\n    \u003csvg class=\"icon icon-lg\"\u003e\n        \u003cpath d=\"...\" fill-rule=\"evenodd\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    Settings\n\u003c/a\u003e\n```\n\nTo add additional attributes to the rendered SVG tag, pass an associative array as the third parameter:\n\n```html\n\u003ca href=\"/settings\"\u003e\n    @svg('cog', 'icon-lg', ['id' =\u003e 'settings-icon']) Settings\n\u003c/a\u003e\n\n\u003c!-- Renders.. --\u003e\n\u003ca href=\"/settings\"\u003e\n    \u003csvg class=\"icon icon-lg\" id=\"settings-icon\"\u003e\n        \u003cpath d=\"...\" fill-rule=\"evenodd\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    Settings\n\u003c/a\u003e\n```\n\nIf you have attributes to declare but no additional class, you can pass an associative array as the second parameter instead:\n\n```html\n\u003ca href=\"/settings\"\u003e\n    @svg('cog', ['id' =\u003e 'settings-icon']) Settings\n\u003c/a\u003e\n\n\u003c!-- Renders.. --\u003e\n\u003ca href=\"/settings\"\u003e\n    \u003csvg class=\"icon\" id=\"settings-icon\"\u003e\n        \u003cpath d=\"...\" fill-rule=\"evenodd\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    Settings\n\u003c/a\u003e\n```\n\nIf you'd like to _override_ the default class name, specify a class in the attributes array:\n\n```html\n\u003ca href=\"/settings\"\u003e\n    @svg('cog', ['class' =\u003e 'overridden']) Settings\n\u003c/a\u003e\n\n\u003c!-- Renders.. --\u003e\n\u003ca href=\"/settings\"\u003e\n    \u003csvg class=\"overridden\"\u003e\n        \u003cuse xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"#zondicon-cog\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n    Settings\n\u003c/a\u003e\n```\n\nIf you'd like to add an attribute that needs no value, just specify it without a key:\n\n```html\n\u003ca href=\"/settings\"\u003e\n    @svg('cog', ['data-foo']) Settings\n\u003c/a\u003e\n\n\u003c!-- Renders.. --\u003e\n\u003ca href=\"/settings\"\u003e\n    \u003csvg class=\"icon\" data-foo\u003e\n        \u003cuse xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"#zondicon-cog\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n    Settings\n\u003c/a\u003e\n```\n\nIf you'd like, you can use the `svg_image` helper directly to expose a fluent syntax for setting SVG attributes:\n\n```html\n\u003ca href=\"/settings\"\u003e\n    {{ svg_image('cog')-\u003eid('settings-icon')-\u003edataFoo('bar')-\u003edataBaz() }} Settings\n\u003c/a\u003e\n\n\u003c!-- Renders.. --\u003e\n\u003ca href=\"/settings\"\u003e\n    \u003csvg class=\"icon\" id=\"settings-icon\" data-foo=\"bar\" data-baz\u003e\n        \u003cuse xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"#zondicon-cog\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n    Settings\n\u003c/a\u003e\n```\n\n## Using a spritesheet\n\nI 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?\n\nSo 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:\n\n```php\n\u003c?php\n\nreturn [\n    // ...\n    'spritesheet_path' =\u003e 'resources/assets/svg/spritesheet.svg',\n    // ...\n];\n```\n\nIf the ID attributes of the SVGs in your spritesheet have a prefix, you can configure that using the `sprite_prefix` option:\n\n```php\n\u003c?php\n\nreturn [\n    // ...\n    'sprite_prefix' =\u003e 'zondicon-',\n    // ...\n];\n```\n\nNext, 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:\n\n```php\n\u003c?php\n\nreturn [\n    // ...\n    'inline' =\u003e false,\n    // ...\n];\n```\n\nMake sure you render the hidden sprite sheet somewhere at the end of any layouts that use SVGs by using the `svg_spritesheet()` helper:\n\n```html\n\u003c!-- layout.blade.php --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\u003c!-- ... --\u003e\u003c/head\u003e\n    \u003cbody\u003e\n        \u003c!-- ... --\u003e\n\n        {{ svg_spritesheet() }}\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou 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:\n\n```html\n\u003ca href=\"/settings\"\u003e\n    {{ svg_image('cog', 'icon icon-lg')-\u003esprite() }} Settings\n\u003c/a\u003e\n\n\u003c!-- Renders.. --\u003e\n\u003ca href=\"/settings\"\u003e\n    \u003csvg class=\"icon icon-lg\" data-foo\u003e\n        \u003cuse xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"#zondicon-cog\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n    Settings\n\u003c/a\u003e\n```\n\nSimilarly, you can force an SVG to render inline even if you are using sprites by default by chaining the `inline` method:\n\n```html\n\u003ca href=\"/settings\"\u003e\n    {{ svg_image('cog', 'icon icon-lg')-\u003einline() }} Settings\n\u003c/a\u003e\n\n\u003c!-- Renders.. --\u003e\n\u003ca href=\"/settings\"\u003e\n    \u003csvg class=\"icon icon-lg\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n        \u003cpath d=\"M3.938 6.497a6.958 6.958 0 0 0-.702 1.694L0 9v2l3.236.809c.16.6.398 1.169.702 1.694l-1.716 2.861 1.414 1.414 2.86-1.716a6.958 6.958 0 0 0 1.695.702L9 20h2l.809-3.236a6.96 6.96 0 0 0 1.694-.702l2.861 1.716 1.414-1.414-1.716-2.86a6.958 6.958 0 0 0 .702-1.695L20 11V9l-3.236-.809a6.958 6.958 0 0 0-.702-1.694l1.716-2.861-1.414-1.414-2.86 1.716a6.958 6.958 0 0 0-1.695-.702L11 0H9l-.809 3.236a6.96 6.96 0 0 0-1.694.702L3.636 2.222 2.222 3.636l1.716 2.86zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z\" fill-rule=\"evenodd\"\u003e\n        \u003c/path\u003e\n    \u003c/svg\u003e\n    Settings\n\u003c/a\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomhatzer%2Fblade-svg-origin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomhatzer%2Fblade-svg-origin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomhatzer%2Fblade-svg-origin/lists"}