{"id":14973799,"url":"https://github.com/kuix/v-svg-directive","last_synced_at":"2025-10-27T02:31:29.282Z","repository":{"id":57389865,"uuid":"81357811","full_name":"kuix/v-svg-directive","owner":"kuix","description":"A simple Vue 2 directive to make referencing SVG symbol sprites easier.","archived":false,"fork":false,"pushed_at":"2017-02-16T12:18:15.000Z","size":9,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-04T19:32:26.276Z","etag":null,"topics":["directive","svg","svg-icons","vue","vue2","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/kuix.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":"2017-02-08T17:43:32.000Z","updated_at":"2022-08-24T17:49:23.000Z","dependencies_parsed_at":"2022-09-02T09:40:40.455Z","dependency_job_id":null,"html_url":"https://github.com/kuix/v-svg-directive","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuix%2Fv-svg-directive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuix%2Fv-svg-directive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuix%2Fv-svg-directive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuix%2Fv-svg-directive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kuix","download_url":"https://codeload.github.com/kuix/v-svg-directive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219861968,"owners_count":16555980,"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":["directive","svg","svg-icons","vue","vue2","vuejs"],"created_at":"2024-09-24T13:49:25.798Z","updated_at":"2025-10-27T02:31:28.960Z","avatar_url":"https://github.com/kuix.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# v-svg-directive\n\n[![NPM version][npm-badge-image]][npm-badge-url]\n\nA simple Vue 2 directive to make referencing SVG symbol sprites easier.\n\n## Install\n\nInstall `v-svg-directive` as an NPM package:\n\n```bash\nnpm install v-svg-directive --save\n```\n\n## Setup\n\nTo use `v-svg-directive` in your project, use the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method to initialize it.\n\n```js\nimport VSvg from 'v-svg-directive';\n\nVue.use(VSvg, {\n    path: '/images/icons.svg',\n    prefix: 'icon-',\n    class: 'icon'\n});\n```\n\n### Options\n\n`Vue.use()` accepts an `options` object as a second argument, and we are leveraging this to pass a few basic options to our directive:\n\n##### `path` (required)\n\nPath to your SVG sprite file. This is relative to the page the SVG icon appears on.\n\n\u003e **Example:**\n\u003e\n\u003e `{ path: '../images/my-svg-icons-bundle.svg' }`\n\u003e\n\u003e will become\n\u003e\n\u003e `\u003csvg\u003e\u003cuse xlink:href=\"../images/my-svg-icons-bundle.svg#my-icon\"\u003e\u003c/use\u003e\u003c/svg\u003e`\n\n\n##### `prefix` (optional)\n\nA prefix to prepend before every icon name. In case all your SVG symbols are prefixed with the same prefix (most commonly `icon-`), use this option to set it, so you'd never have to type it again.\n\n\u003e **Example:**\n\u003e\n\u003e `{ prefix: 'myprefix-' }`\n\u003e\n\u003e will become\n\u003e\n\u003e `\u003csvg\u003e\u003cuse xlink:href=\"../images/my-svg-icons-bundle.svg#myprefix-my-icon\"\u003e\u003c/use\u003e\u003c/svg\u003e`\n\n##### `class` (optional)\n\nA single classname to be added to all your SVG icons.\n\n\u003e **Example:**\n\u003e\n\u003e `{ class: 'svg-icon' }`\n\u003e\n\u003e will become\n\u003e\n\u003e `\u003csvg class=\"svg-icon\"\u003e\u003cuse xlink:href=\"../images/my-svg-icons-bundle.svg#myprefix-my-icon\"\u003e\u003c/use\u003e\u003c/svg\u003e`\n\n## Usage\n\nTo include an SVG icon in your document, use the directive like this:\n\n```html\n\u003csvg v-svg=\"'my-icon'\"\u003e\u003c/svg\u003e\n```\n\n**Note the single quotes inside double quotes! Starting from Vue.js 2.0 directives accept expressions, not literal strings.**\n\nThis means that if your icon is named `my-icon`, you will need to use single quotes inside double quotes to pass it along as a string (`v-svg=\"'my-icon'\"`), otherwise Vue.js will look for a Vue property called `my-icon`. (Which is a perfectly fine usecase too, btw. 😉)\n\n## Credit\n\nThis directive is highly inspired by [Phunky's `vue-svg-directive`](https://github.com/Phunky/vue-svg-directive). We started using it in our projects, but ran into a few issues with it. Then Vue 2 came along, and we decided to \"lazy-fork\" it, and create a version that could be used in almost all of our projects.\n\n[npm-badge-image]: https://badge.fury.io/js/v-svg-directive.svg\n[npm-badge-url]: https://npmjs.org/package/v-svg-directive\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuix%2Fv-svg-directive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkuix%2Fv-svg-directive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuix%2Fv-svg-directive/lists"}