{"id":15912398,"url":"https://github.com/oliverfindl/vue-svg-inline-plugin","last_synced_at":"2025-03-22T16:30:35.137Z","repository":{"id":49817470,"uuid":"221054044","full_name":"oliverfindl/vue-svg-inline-plugin","owner":"oliverfindl","description":"Vue plugin for inline replacement of SVG images with actual content of SVG files.","archived":false,"fork":false,"pushed_at":"2022-11-08T22:04:27.000Z","size":248,"stargazers_count":33,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T13:31:55.004Z","etag":null,"topics":["inline","javascript","plugin","sprites","svg","symbols","vue","vue-plugin","vue-svg-inline-plugin","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/oliverfindl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-11T19:27:09.000Z","updated_at":"2024-07-04T17:28:54.000Z","dependencies_parsed_at":"2023-01-21T09:02:53.445Z","dependency_job_id":null,"html_url":"https://github.com/oliverfindl/vue-svg-inline-plugin","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliverfindl%2Fvue-svg-inline-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliverfindl%2Fvue-svg-inline-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliverfindl%2Fvue-svg-inline-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliverfindl%2Fvue-svg-inline-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oliverfindl","download_url":"https://codeload.github.com/oliverfindl/vue-svg-inline-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244986213,"owners_count":20542973,"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":["inline","javascript","plugin","sprites","svg","symbols","vue","vue-plugin","vue-svg-inline-plugin","vuejs"],"created_at":"2024-10-06T16:04:34.079Z","updated_at":"2025-03-22T16:30:34.835Z","avatar_url":"https://github.com/oliverfindl.png","language":"JavaScript","funding_links":["https://paypal.me/oliverfindl"],"categories":[],"sub_categories":[],"readme":"# vue-svg-inline-plugin\n\n[![version](https://img.shields.io/npm/v/vue-svg-inline-plugin.svg?style=flat)][npm]\n[![downloads](https://img.shields.io/npm/dt/vue-svg-inline-plugin.svg?style=flat)][npm]\n[![license](https://img.shields.io/npm/l/vue-svg-inline-plugin.svg?style=flat)][mit]\n[![paypal](https://img.shields.io/badge/donate-paypal-blue.svg?colorB=0070ba\u0026style=flat)](https://paypal.me/oliverfindl)\n\n[Vue][vue] plugin for inline replacement of SVG images with actual content of SVG files.\n\n\u003e ⚠ Reactive [Vue][vue] bindings won't be transfered to SVG replacement.\n\n\u003e SVG files should be optimized beforehand (e.g.: using [SVGO](https://www.npmjs.com/package/svgo) or [SVGOMG](https://jakearchibald.github.io/svgomg/)).\n\n\u003e Placeholder images should be optimized beforehand (e.g.: using [pngquant](https://pngquant.org/) or [TinyPNG](https://tinypng.com/) / [TinyJPG](https://tinyjpg.com/)).\n\n\u003e Compatible with [Vue][vue]@2 and [Vue][vue]@3.\n\n---\n\n## Table of contents:\n* [Installation](#installation)\n* [Usage](#usage)\n* [Directive](#directive)\n* [Lazy loading](#lazy-loading)\n* [Configuration](#configuration)\n* [Polyfills](#polyfills)\n* [Examples](#examples)\n\n---\n\n## Installation\n\n### Package managers\n\n* [npm](https://npmjs.com/) [[package][npm]]:\n```bash\n$ npm install vue-svg-inline-plugin --save\n```\n\n* [yarn](https://yarnpkg.com/en/) [[package](https://yarnpkg.com/en/package/vue-svg-inline-plugin)]:\n```bash\n$ yarn add vue-svg-inline-plugin\n```\n\n### Legacy browsers\n\n* [unpkg](https://unpkg.com/) [[package](https://www.unpkg.com/browse/vue-svg-inline-plugin/)]:\n```html\n\u003cscript src=\"//unpkg.com/vue-svg-inline-plugin\"\u003e\u003c/script\u003e\n```\n\n* [jsDelivr](https://jsdelivr.com/) [[package](https://www.jsdelivr.com/package/npm/vue-svg-inline-plugin)]:\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/vue-svg-inline-plugin\"\u003e\u003c/script\u003e\n```\n\n### Modern browsers\n\n\u003e This version is not transpiled and does not include any [polyfills](#polyfills).\n\n* [unpkg](https://unpkg.com/) [[package](https://www.unpkg.com/browse/vue-svg-inline-plugin/)]:\n```html\n\u003cscript src=\"//unpkg.com/vue-svg-inline-plugin/dist/vue-svg-inline-plugin-modern.min.js\"\u003e\u003c/script\u003e\n```\n\n* [jsDelivr](https://jsdelivr.com/) [[package](https://www.jsdelivr.com/package/npm/vue-svg-inline-plugin)]:\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/vue-svg-inline-plugin/dist/vue-svg-inline-plugin-modern.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### [Webpack][webpack] based [Vue][vue] projects (e.g.: [Webpack][webpack] or [Vue CLI][vue-cli]) and [Vite][vite] projects\n\n```javascript\n// Vue@2\n\n// import basic Vue app\nimport Vue from \"vue\";\nimport App from \"./App.vue\";\n\n// import Vue plugin\nimport VueSvgInlinePlugin from \"vue-svg-inline-plugin\";\n\n// import polyfills for IE if you want to support it\nimport \"vue-svg-inline-plugin/src/polyfills\";\n\n// use Vue plugin without options\nVue.use(VueSvgInlinePlugin);\n\n// use Vue plugin with options\nVueSvgInlinePlugin.install(Vue, {\n\tattributes: {\n\t\tdata: [ \"src\" ],\n\t\tremove: [ \"alt\" ]\n\t}\n});\n\n// initialize and mount Vue app\nnew Vue({\n\trender: h =\u003e h(App),\n}).$mount(\"#app\");\n```\n\n```javascript\n// Vue@3\n\n// import basic Vue app\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\n\n// import Vue plugin\nimport VueSvgInlinePlugin from \"vue-svg-inline-plugin\";\n\n// import polyfills for IE if you want to support it\nimport \"vue-svg-inline-plugin/src/polyfills\";\n\n// initialize Vue app\nconst app = createApp(App);\n\n// use Vue plugin without options\napp.use(VueSvgInlinePlugin);\n\n// use Vue plugin with options\napp.use(VueSvgInlinePlugin, {\n\tattributes: {\n\t\tdata: [ \"src\" ],\n\t\tremove: [ \"alt\" ]\n\t}\n});\n\n// mount Vue app\napp.mount(\"#app\");\n```\n\n### Browsers\n\n```javascript\n// Vue@2\n\n// use Vue plugin without options\nVue.use(VueSvgInlinePlugin);\n\n// use Vue plugin with options\nVueSvgInlinePlugin.install(Vue, {\n\tattributes: {\n\t\tdata: [ \"src\" ],\n\t\tremove: [ \"alt\" ]\n\t}\n});\n\n// initialize and mount Vue app\nnew Vue({ /* options */ }).$mount(\"#app\");\n```\n\n```javascript\n// Vue@3\n\n// initialize Vue app\nconst app = Vue.createApp({ /* options */ });\n\n// use Vue plugin without options\napp.use(VueSvgInlinePlugin);\n\n// use Vue plugin with options\napp.use(VueSvgInlinePlugin, {\n\tattributes: {\n\t\tdata: [ \"src\" ],\n\t\tremove: [ \"alt\" ]\n\t}\n});\n\n// mount Vue app\napp.mount(\"#app\");\n```\n\n## Directive\n\n\u003e Directive name can be changed via [options](#configuration).\n\n**`v-svg-inline`** directive:\n\n```html\n\u003cimg v-svg-inline class=\"icon\" src=\"./images/example.svg\" alt=\"example svg image\" /\u003e\n```\nReplaces into:\n```xml\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"...\" class=\"icon\" focusable=\"false\" role=\"presentation\" tabindex=\"-1\"\u003e\n\t\u003cpath d=\"...\"\u003e\u003c/path\u003e\n\t\u003c!-- ... --\u003e\n\u003c/svg\u003e\n```\n\n**`v-svg-inline`** directive with **`sprite`** modifier:\n\u003e ~~⚠ Note, that for now, the `viewBox` property is not being applied on the `\u003csvg\u003e` link node.  \nThis can cause issues when having icons differently sized in your UI.  \nFor the most icon-systems, you can add a `viewBox=\"0 0 24 24\"` by yourself onto the `\u003cimg\u003e` node or use [`attributes.add` option](#configuration).~~\n\n\u003e Fixed in version 2.1.0, use [`attributes.clone` option](#configuration).\n\n```html\n\u003cimg v-svg-inline.sprite class=\"icon\" src=\"./images/example.svg\" alt=\"example svg image\" /\u003e\n```\nReplaces into:\n```xml\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"...\" class=\"icon\" focusable=\"false\" role=\"presentation\" tabindex=\"-1\"\u003e\n\t\u003cuse xlink:href=\"#svg-inline-plugin-sprite-\u003cNUMBER\u003e\" href=\"#svg-inline-plugin-sprite-\u003cNUMBER\u003e\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n\u003c!-- ... --\u003e\n\u003c!-- injected before body closing tag --\u003e\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none !important;\"\u003e\n\t\u003csymbol id=\"svg-inline-plugin-sprite-\u003cNUMBER\u003e\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"...\"\u003e\n\t\t\u003cpath d=\"...\"\u003e\u003c/path\u003e\n\t\t\u003c!-- ... --\u003e\n\t\u003c/symbol\u003e\n\u003c/svg\u003e\n```\n\n## Lazy loading\n\nThis plugin supports lazy (down)loading of SVG files. To enable it, rename `src` attribute to `data-src`. Please also provide placeholder image, which should be located in `src` attribute to avoid broken image icons in browsers.\n\n## Configuration\n\n### Default options\n\n```javascript\n{\n\tdirective: {\n\t\tname: \"v-svg-inline\",\n\t\tspriteModifierName: \"sprite\"\n\t},\n\tattributes: {\n\t\tclone: [ \"viewbox\" ],\n\t\tmerge: [ \"class\", \"style\" ],\n\t\tadd: [ {\n\t\t\tname: \"focusable\",\n\t\t\tvalue: false\n\t\t}, {\n\t\t\tname: \"role\",\n\t\t\tvalue: \"presentation\"\n\t\t}, {\n\t\t\tname: \"tabindex\",\n\t\t\tvalue: -1\n\t\t} ],\n\t\tdata: [],\n\t\tremove: [ \"alt\", \"src\", \"data-src\" ]\n\t},\n\tcache: {\n\t\tversion: \"\u003cPACKAGE_VERSION\u003e\",\n\t\tpersistent: true,\n\t\tremoveRevisions: true\n\t},\n\tintersectionObserverOptions: {},\n\taxios: null,\n\txhtml: false\n}\n```\n\n### Explanation\n\n* **`directive.name`:**  \nDefines directive name (lowercase string), which marks images you want to replace with inline SVGs.\n\n* **`directive.spriteModifierName`:**  \nDefines directive modifier name (lowercase string), which together with `directive.name` marks images you want to replace with inline SVGs using inline SVG sprites.\n\n* **`attributes.clone`:**  \nArray of attributes (lowercase strings) which should be cloned into SVG link node if using inline SVG sprites.\n\n* **`attributes.merge`:**  \nArray of attributes (lowercase strings) which should be merged.\n\n* **`attributes.add`:**  \nArray of attributes (objects with name (lowercase string) and value (string) properties), which should be added. If attribute already exists, it will be merged or skipped depending on `attributes.merge` option.\n\n* **`attributes.data`:**  \nArray of attributes (lowercase strings) which should be transformed into data-attributes. If data-attribute already exists, it will be merged or skipped depending on `attributes.merge` option.\n\n* **`attributes.remove`:**  \nArray of attributes (lowercase strings) which should be removed.\n\n* **`cache.version`:**  \nDefines cache version (lowercase string or number).\n\n* **`cache.persistent`:**  \nBoolean. Cache downloaded SVG files into local storage.\n\n* **`cache.removeRevisions`:**  \nBoolean. Remove previous cache revisions from local storage.\n\n* **`intersectionObserverOptions`:**  \nIntersection observer options object for processing image nodes. This option is not validated. [Official documentation](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options).\n\n* **`axios`:**  \nAxios instance with pre-configured options. If omitted, new axios instance (if axios available) will be created. [Official documentation](https://github.com/axios/axios#creating-an-instance).\n\n* **`xhtml`:**  \nBoolean. In XHTML mode attribute minimization is forbidden. Empty attributes are filled with their names to be XHTML-compliant (e.g.: disabled=\"disabled\").\n\n### Notices\n\n* User-defined options are deep-merged with default options. Arrays are not concatenated.\n\n* Attributes options are executed in this order: **clone \u003e merge** \u003e **add** \u003e **data** \u003e **remove**.\n\n## Polyfills\n\n Required polyfills for IE:\n\n* [fetch](https://github.com/github/fetch) polyfill or [axios](https://github.com/axios/axios) library\n* [IntersectionObserver](https://github.com/w3c/IntersectionObserver) polyfill\n\n## Examples\n\n* [Vue][vue]@2:\n\t* [browser example](https://github.com/oliverfindl/vue-svg-inline-plugin/tree/master/examples/browser-vue2)\n\t* [vue-cli example](https://github.com/oliverfindl/vue-svg-inline-plugin/tree/master/examples/vue-cli-vue2)\n\t* [webpack example](https://github.com/oliverfindl/vue-svg-inline-plugin/tree/master/examples/webpack-vue2)\n* [Vue][vue]@3:\n\t* [browser example](https://github.com/oliverfindl/vue-svg-inline-plugin/tree/master/examples/browser-vue3)\n\t* [vite example](https://github.com/oliverfindl/vue-svg-inline-plugin/tree/master/examples/vite-vue3)\n\t* [webpack example](https://github.com/oliverfindl/vue-svg-inline-plugin/tree/master/examples/webpack-vue3)\n\n---\n\n## License\n\n[MIT][mit]\n\n[mit]: https://opensource.org/licenses/MIT\n[npm]: https://www.npmjs.com/package/vue-svg-inline-plugin\n[vue]: https://github.com/vuejs/vue\n[vue-cli]: https://github.com/vuejs/vue-cli\n[vite]: https://github.com/vitejs/vite\n[webpack]: https://github.com/webpack/webpack\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foliverfindl%2Fvue-svg-inline-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foliverfindl%2Fvue-svg-inline-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foliverfindl%2Fvue-svg-inline-plugin/lists"}