{"id":17676705,"url":"https://github.com/yoannchb-pro/inner-svg","last_synced_at":"2026-04-09T01:31:36.494Z","repository":{"id":169589366,"uuid":"645569276","full_name":"yoannchb-pro/inner-svg","owner":"yoannchb-pro","description":"Inject svg into your html with only one attribute or with javascript","archived":false,"fork":false,"pushed_at":"2023-05-26T15:50:42.000Z","size":44,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-21T12:45:31.409Z","etag":null,"topics":["angular","injection","javascript","react","svg","svg-inject","typescript","vuejs"],"latest_commit_sha":null,"homepage":"https://yoannchb-pro.github.io/inner-svg/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yoannchb-pro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-26T00:34:48.000Z","updated_at":"2023-05-26T02:49:57.000Z","dependencies_parsed_at":"2023-07-08T03:46:39.278Z","dependency_job_id":null,"html_url":"https://github.com/yoannchb-pro/inner-svg","commit_stats":null,"previous_names":["yoannchb-pro/inner-svg"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/yoannchb-pro/inner-svg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoannchb-pro%2Finner-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoannchb-pro%2Finner-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoannchb-pro%2Finner-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoannchb-pro%2Finner-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yoannchb-pro","download_url":"https://codeload.github.com/yoannchb-pro/inner-svg/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoannchb-pro%2Finner-svg/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31581864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":["angular","injection","javascript","react","svg","svg-inject","typescript","vuejs"],"created_at":"2024-10-24T07:26:28.484Z","updated_at":"2026-04-09T01:31:36.474Z","avatar_url":"https://github.com/yoannchb-pro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# inner-svg\n\nInject svg into your html with only one attribute or with javascript\n\n## Update\n\n[See the Changelog](./CHANGELOG.md)\n\n## Installation\n\n### Node\n\n```\n$ npm i inner-svg-ts\n```\n\nAnd then\n\n```js\nconst innerSVG = require(\"inner-svg-ts\");\nimport innerSVG from \"inner-svg-ts\";\n\n//or if you want only to work with attributes for react, angular, vuejs ...\nimport \"inner-svg-ts\";\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/inner-svg-ts@1.0.1/dist/inner-svg.js\"\u003e\u003c/script\u003e\n```\n\n## Demo\n\n[Live demo on the github page](https://yoannchb-pro.github.io/inner-svg/index.html)\n\n## How to use ?\n\n### With attribute\n\n\u003e NOTE: You can modify as you want the attribute, the svg will automatically update. innerSVG also detect when a new element is write into the page or removed from the page.\n\nThe path can be relative or absolut for example `./assets/discord.svg` and `/static/discord.svg` will both work\n\n```html\n\u003ci\n  id=\"originalElement\"\n  class=\"fill-red-500\"\n  title=\"some svg\"\n  data-i-svg=\"./assets/discord.svg\"\n\u003e\u003c/i\u003e\n```\n\nWill inject the svg into the current page with all the attributes derived from the original element (The id is not transfered to the svg)\n\n```html\n\u003csvg title=\"some svg\" class=\"fill-red-500\"\u003e...\u003c/svg\u003e\n```\n\n### In javascript\n\n#### Init\n\n```js\nconst injection = innerSVG(\n  document.querySelector(\"#element\"),\n  \"./assets/discord.svg\"\n);\n```\n\n#### Getters\n\n- injection.element\n- injection.svg\n- injection.path\n\n#### Methods\n\nUpdate the path of the svg\n\n```js\ninjection.updatePath(\"./assets/hearth.svg\");\n```\n\nUpdate attributes from the original element\n\n```js\ninjection.copySameAttributesFromOriginalElement();\n```\n\nRemove the svg\n\n```js\ninjection.desctruct();\n```\n\nHandle svg loaded\n\n```js\nfunction callback(injection) {\n  console.log(injection.svg);\n}\n\ninjection.onFirstLoad(callback); // will not be call if the path change\ninjection.onEachLoad(callback);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoannchb-pro%2Finner-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoannchb-pro%2Finner-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoannchb-pro%2Finner-svg/lists"}