{"id":13824195,"url":"https://github.com/shrpne/vue-inline-svg","last_synced_at":"2025-05-15T09:06:13.870Z","repository":{"id":41448782,"uuid":"125382761","full_name":"shrpne/vue-inline-svg","owner":"shrpne","description":"Dynamically loads an SVG source and inline \u003csvg\u003e element so you can manipulate the style of it ","archived":false,"fork":false,"pushed_at":"2025-05-05T18:57:53.000Z","size":590,"stargazers_count":181,"open_issues_count":4,"forks_count":22,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-13T21:59:04.695Z","etag":null,"topics":["dynamic","inline","load","svg"],"latest_commit_sha":null,"homepage":"","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/shrpne.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2018-03-15T14:51:26.000Z","updated_at":"2025-05-05T18:57:51.000Z","dependencies_parsed_at":"2023-12-26T08:45:49.293Z","dependency_job_id":"c0b81384-b269-41d1-ac70-10101ff59037","html_url":"https://github.com/shrpne/vue-inline-svg","commit_stats":{"total_commits":36,"total_committers":8,"mean_commits":4.5,"dds":"0.19444444444444442","last_synced_commit":"d06950d10b973c2781de80a2c0a306bdee9e29fa"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shrpne%2Fvue-inline-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shrpne%2Fvue-inline-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shrpne%2Fvue-inline-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shrpne%2Fvue-inline-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shrpne","download_url":"https://codeload.github.com/shrpne/vue-inline-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254043250,"owners_count":22004912,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["dynamic","inline","load","svg"],"created_at":"2024-08-04T09:00:58.435Z","updated_at":"2025-05-15T09:06:13.851Z","avatar_url":"https://github.com/shrpne.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries","Packages","TypeScript","UI Utilities [🔝](#readme)"],"sub_categories":["UI Utilities"],"readme":"# Vue Inline SVG\n\n[![NPM Package](https://img.shields.io/npm/v/vue-inline-svg.svg?style=flat-square)](https://www.npmjs.org/package/vue-inline-svg)\n[![Minified Size](https://img.shields.io/bundlephobia/min/vue-inline-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-inline-svg)\n[![Gzipped Size](https://img.shields.io/bundlephobia/minzip/vue-inline-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-inline-svg)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/shrpne/vue-inline-svg/blob/master/LICENSE)\n\nVue component loads an SVG source dynamically and inline `\u003csvg\u003e` so you can manipulate the style of it with CSS or JS.\nIt looks like basic `\u003cimg\u003e` so you markup will not be bloated with SVG content.\nLoaded SVGs are cached so it will not make network request twice.\n\n### Using Vue v2?\nCheck old version [vue-inline-svg@2](https://github.com/shrpne/vue-inline-svg/tree/v2?tab=readme-ov-file#vue-inline-svg)\n\n[ci-img]:  https://travis-ci.org/shrpne/vue-inline-svg.svg\n[ci]:      https://travis-ci.org/shrpne/vue-inline-svg\n\n\n- [Install](#install)\n  - [NPM](#npm)\n  - [CDN](#cdn)\n- [Usage](#usage)\n  - [props](#props)\n    - [src](#--src)\n    - [title](#--title)\n    - [uniqueIds](#--uniqueids)\n    - [uniqueIdsBase](#--uniqueidsbaase)\n    - [keepDuringLoading](#--keepduringloading)\n    - [transformSource](#--transformsource)\n  - [SVG attributes](#svg-attributes)\n  - [events](#events)\n    - [loaded](#--loaded)\n    - [unloaded](#--unloaded)\n    - [error](#--error)\n- [Security Considerations](#-security-considerations)\n  - [SVGs from your project assets](#1-svgs-from-your-project-assets)\n  - [SVGs from third-party sources](#2-svgs-from-third-party-sources-or-user-generated-content)\n- [Comparison](#comparison)\n- [Changelog](#changelog)\n- [Contributing](#contributing)\n- [License](#license)\n\n\n## Install\n\n### NPM\n\n```bash\nnpm install vue-inline-svg\n```\n\nRegister locally in your component\n```js\nimport InlineSvg from 'vue-inline-svg';\n\n// Your component\nexport default {\n    components: {\n        InlineSvg,\n    }\n}\n```\n\nOr register globally in the Vue app\n```js\nimport { createApp } from 'vue'\nimport InlineSvg from 'vue-inline-svg';\n\nconst app = createApp({/*...*/});\napp.component('inline-svg', InlineSvg);\n```\n\n\n### CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003c!-- Include the `vue-inline-svg` script on your page after Vue script --\u003e\n\u003cscript src=\"https://unpkg.com/vue-inline-svg\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\nconst app = Vue.createApp({/*...*/});\napp.component('inline-svg', VueInlineSvg);\n\u003c/script\u003e\n```\n\n\n## Usage\n\n```html\n\u003cinline-svg\n    src=\"image.svg\"\n    transformSource=\"transformSvg\"\n    @loaded=\"svgLoaded($event)\"\n    @unloaded=\"svgUnloaded()\"\n    @error=\"svgLoadError($event)\"\n    width=\"150\"\n    height=\"150\"\n    fill=\"black\"\n    aria-label=\"My image\"\n\u003e\u003c/inline-svg\u003e\n```\n[Example](https://github.com/shrpne/vue-inline-svg/blob/master/demo/index.html)\n\n\n### props\n#### - `src`\nType: `string` **Required**\n\nPath to SVG file\n\n```html\n\u003cinline-svg src=\"/my.svg\"/\u003e\n```\n\nℹ️ **Note**: if you are using assets not from `public` directory, then you will need to import them with your bundler.\n\n**Webpack**: vue-loader or vue-cli will not handle paths like '../assets/my.svg' by file-loader automatically (like vue-cli do for `\u003cimg\u003e` tag), so you will need to use it with `require()`:\n\n**Vite**: You might like [vite-plugin-require](https://www.npmjs.com/package/vite-plugin-require) to enable `require()` in Vite.\n\n```html\n\u003cinline-svg :src=\"require('../assets/my.svg')\"/\u003e\n```\n\n\nLearn more about static assets handling:\n- vite: https://vite.dev/guide/assets.html\n- webpack's vue-loader: https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules\n- vue-cli: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling\n\n\n#### - `title`\nType: `string`\n\nSets/overwrites the `\u003ctitle\u003e` of the SVG\n\n```html\n\u003cinline-svg src=\"image.svg\" title=\"My Image\"/\u003e\n```\n\n\n#### - `uniqueIds`\nType: `boolean | string`\n\nAdd suffix to all IDs in SVG to eliminate conflicts for multiple SVGs with the same source. If `true` - suffix is random string, if `string` - suffix is this string.\n\n```html\n\u003cinline-svg src=\"image.svg\" :uniqueIds=\"true\"/\u003e\n\u003cinline-svg src=\"image.svg\" uniqueIds=\"my-unique-suffix\"/\u003e\n```\n\n\n#### - `uniqueIdsBase`\nType: `string`\n\nAn URL to prefix each ID in case you use the `\u003cbase\u003e` tag and `uniqueIds`.\n\n```html\n\u003cinline-svg src=\"image.svg\" :uniqueIds=\"true\" uniqueIdsBase=\"http://example.com\"\"/\u003e\n```\n\n\n#### - `keepDuringLoading`\nType: `boolean`; Default: `true`\n\nIt makes vue-inline-svg to preserve old image visible, when new image is being loaded. Pass `false` to disable it and show nothing during loading.\n\n```html\n\u003cinline-svg src=\"image.svg\" :keepDuringLoading=\"false\"/\u003e\n```\n\n\n#### - `transformSource`\nType: `(svg: SVGElement) =\u003e SVGElement`\n\nFunction to transform SVG content\n\nThis example create circle in svg:\n```html\n\u003cinline-svg src=\"image.svg\" :transformSource=\"transform\"/\u003e\n\n\u003cscript\u003e\nconst transform = (svg) =\u003e {\n    let point = document.createElementNS(\"http://www.w3.org/2000/svg\", 'circle');\n        point.setAttributeNS(null, 'cx', '20');\n        point.setAttributeNS(null, 'cy', '20');\n        point.setAttributeNS(null, 'r', '10');\n        point.setAttributeNS(null, 'fill', 'red');\n        svg.appendChild(point);\n    return svg;\n}\n// For cleaner syntax you could use https://github.com/svgdotjs/svg.js\n\u003c/script\u003e\n```\n\n\n### SVG attributes\nOther SVG and HTML attributes will be passed to inlined `\u003csvg\u003e`. Except attributes with `false` or `null` value.\n```html\n\u003c!-- input --\u003e\n\u003cinline-svg\n    fill-opacity=\"0.25\"\n    :stroke-opacity=\"myStrokeOpacity\"\n    :color=\"false\"\n\u003e\u003c/inline-svg\u003e\n\n\u003c!-- output --\u003e\n\u003csvg fill-opacity=\"0.25\" stroke-opacity=\"0.5\"\u003e\u003c/svg\u003e\n```\n\n\n### events\n#### - `loaded`\nCalled when SVG image is loaded and inlined.\nInlined SVG element passed as argument into the listener’s callback function.\n```html\n\u003cinline-svg @loaded=\"myInlinedSvg = $event\"/\u003e\n```\n\n#### - `unloaded`\nCalled when `src` prop was changed and another SVG start loading.\n```html\n\u003cinline-svg @unloaded=\"handleUnloaded()\"/\u003e\n```\n\n#### - `error`\nCalled when SVG failed to load.\nError object passed as argument into the listener’s callback function.\n```html\n\u003cinline-svg @error=\"log($event)\"/\u003e\n```\n\n## 🛡️ Security Considerations\n\nInlining SVGs directly into the DOM provides flexibility for styling and interaction. However, it can pose risks of XSS (Cross-Site Scripting) attacks. SVGs can contain JavaScript (`\u003cscript\u003e` tags), event handlers (`onload`, `onclick`, etc.), or external references (`\u003cuse xlink:href=\"...\"`), which could be exploited.\n\nTo ensure security, follow these guidelines based on your SVG source:\n\n### 1️⃣ SVGs from your project assets\nManually check they don't contain any harmful elements or attributes (scripts, event handlers, external references)\n\n### 2️⃣ SVGs from third-party sources or user-generated content\n\nAlways sanitize before inlining. Use [DOMPurify](https://github.com/cure53/DOMPurify)\n\n```html\n\u003cinline-svg\n    src=\"https://example.com/external.svg\"\n    :transformSource=\"sanitize\"\n/\u003e\n\n\u003cscript\u003e\n    import DOMPurify from 'dompurify';\n\n    function sanitize(svg) {\n        svg.innerHTML = DOMPurify.sanitize(svg.innerHTML, { USE_PROFILES: { svg: true } });\n        return svg;\n    }\n\u003c/script\u003e\n```\n\n## Comparison\n\n- This module: [![Minified Size](https://img.shields.io/bundlephobia/min/vue-inline-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-inline-svg)\n- [vue-simple-svg](https://github.com/seiyable/vue-simple-svg): [![Minified Size](https://img.shields.io/bundlephobia/min/vue-simple-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-simple-svg), does not cache network requests, has wrapper around svg, attrs passed to `\u003csvg\u003e` are limited, converts `\u003cstyle\u003e` tag into `style=\"\"` attr\n- [vite-svg-loader](https://www.npmjs.com/package/vite-svg-loader), webpack's [vue-svg-loader](https://github.com/visualfanatic/vue-svg-loader). They use different approach, they inline SVG during compilation. It has pros that SVG is bundled and no http request needed. But also it has cons that bundle size grows (or markup size if prerendered,\n  especially if you have same image repeated several times). (Discussed in [#11](https://github.com/shrpne/vue-inline-svg/issues/11))\n\n\n## Changelog\n[CHANGELOG.md](https://github.com/shrpne/vue-inline-svg/blob/master/CHANGELOG.md)\n\n\n## Contributing\n[CONTRIBUTING.md](https://github.com/shrpne/vue-inline-svg/blob/master/CONTRIBUTING.md)\n\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshrpne%2Fvue-inline-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshrpne%2Fvue-inline-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshrpne%2Fvue-inline-svg/lists"}