├── .gitignore ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── generator.js ├── index.js ├── package.json ├── prompts.js └── template └── src └── components └── SvgIcon.vue /.gitignore: -------------------------------------------------------------------------------- 1 | # IDE 2 | .idea/ 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (https://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # Lock files 43 | package-lock.json 44 | yarn.lock 45 | 46 | # TypeScript v1 declaration files 47 | typings/ 48 | 49 | # Optional npm cache directory 50 | .npm 51 | 52 | # Optional eslint cache 53 | .eslintcache 54 | 55 | # Optional REPL history 56 | .node_repl_history 57 | 58 | # Output of 'npm pack' 59 | *.tgz 60 | 61 | # Yarn Integrity file 62 | .yarn-integrity 63 | 64 | # dotenv environment variables file 65 | .env 66 | 67 | # next.js build output 68 | .next 69 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to `vue-cli-plugin-svg-sprite` will be documented in this file. 4 | 5 | Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) principles. 6 | 7 | ## [1.1.0] - 2021-04-15 8 | 9 | ### Changed 10 | - Bumped svg-sprite-loader dependency to ^6.0 11 | 12 | ## [1.0.0] - 2019-04-26 13 | 14 | ### Fixed 15 | - Fix SvgIcon component to work with both CommonJS and ES Module exports 16 | 17 | ## [0.3.1] - 2018-11-09 18 | 19 | ### Fixed 20 | - Some tweaks to keep indenting of `vue.config.js` tidy after generator has done its work 21 | 22 | ## [0.3.0] - 2018-10-29 23 | 24 | ### Added 25 | - Generator option to add SVGO-loader 26 | 27 | ## [0.2.0] - 2018-10-29 28 | 29 | ### Added 30 | - Documentation 31 | - Generator with SvgIcon component 32 | 33 | ### Changed 34 | - Use filenameHashing option to determine sprite filename 35 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to make participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at `service@swis.nl`. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ 75 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are **welcome** and will be fully **credited**. 4 | 5 | We accept contributions via Pull Requests on [Github](https://github.com/swisnl/laravel-javascript-data-response). 6 | 7 | 8 | ## Pull Requests 9 | 10 | - **[JavaScript Standard Style](http://standardjs.com)** 11 | 12 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date. 13 | 14 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option. 15 | 16 | - **Create feature branches** - Don't ask us to pull from your master branch. 17 | 18 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests. 19 | 20 | - **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](http://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting. 21 | 22 | 23 | **Happy coding**! 24 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Detailed description 4 | 5 | Provide a detailed description of the change or addition you are proposing. 6 | 7 | Make it clear if the issue is a bug, an enhancement or just a question. 8 | 9 | ## Context 10 | 11 | Why is this change important to you? How would you use it? 12 | 13 | How can it benefit other users? 14 | 15 | ## Possible implementation 16 | 17 | Not obligatory, but suggest an idea for implementing addition or change. 18 | 19 | ## Your environment 20 | 21 | Include as many relevant details about the environment you experienced the bug in and how to reproduce it. 22 | 23 | * Version used (e.g. Node 10 and Vue CLI 3.5): 24 | * Operating system and version (e.g. Ubuntu 16.04, Windows 7): 25 | * Link to your project or minimal working example: 26 | * Link to your `vue.config.js`: 27 | * Output of [`vue inspect`](https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config) (rules and plugins): 28 | * ... 29 | * ... 30 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | Copyright (c) 2018 SWIS BV 4 | 5 | > Permission is hereby granted, free of charge, to any person obtaining a copy 6 | > of this software and associated documentation files (the "Software"), to deal 7 | > in the Software without restriction, including without limitation the rights 8 | > to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | > copies of the Software, and to permit persons to whom the Software is 10 | > furnished to do so, subject to the following conditions: 11 | > 12 | > The above copyright notice and this permission notice shall be included in 13 | > all copies or substantial portions of the Software. 14 | > 15 | > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | > IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | > FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | > AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | > LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | > OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | > THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-cli-plugin-svg-sprite 2 | 3 | [![Latest Version on NPM](https://img.shields.io/npm/v/vue-cli-plugin-svg-sprite.svg)](https://www.npmjs.com/package/vue-cli-plugin-svg-sprite) 4 | [![Code Style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) 5 | [![Software License](https://img.shields.io/github/license/swisnl/vue-cli-plugin-svg-sprite.svg)](LICENSE.md) 6 | [![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen.svg)](https://plant.treeware.earth/swisnl/vue-cli-plugin-svg-sprite) 7 | [![Known Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/vue-cli-plugin-svg-sprite.svg)](https://snyk.io/test/github/swisnl/vue-cli-plugin-svg-sprite?targetFile=package.json) 8 | [![Made by SWIS](https://img.shields.io/badge/%F0%9F%9A%80-made%20by%20SWIS-%230737A9.svg)](https://www.swis.nl) 9 | 10 | vue-cli 3 plugin to build an SVG sprite using [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader). 11 | 12 | ⚠️ Vue CLI and this plugin are in Maintenance Mode! ⚠️ 13 | 14 | For new projects, it is now recommended to use [`create-vue`](https://github.com/vuejs/create-vue) to scaffold [Vite](https://vitejs.dev/)-based projects. Also refer to the [Vue 3 Tooling Guide](https://vuejs.org/guide/scaling-up/tooling.html) for the latest recommendations. 15 | 16 | ## Install 17 | 18 | ```bash 19 | vue add svg-sprite 20 | ``` 21 | 22 | ## Usage 23 | 24 | Use the [SvgIcon component](template/src/components/SvgIcon.vue) provided by the generator or check the [loader documentation](https://github.com/kisenka/svg-sprite-loader#runtime-configuration) for other/advanced usages. 25 | 26 | N.B. This plugin only adds a loader to the Webpack configuration, it doesn't glob your directory and include every file it finds. You need to require the icons from within your code (JS, CSS, etc.) just like other modules to have them added to the sprite! 27 | 28 | ### Options 29 | 30 | Most options for this plugin are passed directly to svg-sprite-loader and its plugin. 31 | Please refer to [their documentation](https://github.com/kisenka/svg-sprite-loader#configuration) for further details. 32 | The configuration must be defined in your `vue.config.js` file as below (defaults shown). 33 | 34 | ```javascript 35 | module.exports = { 36 | pluginOptions: { 37 | svgSprite: { 38 | /* 39 | * The directory containing your SVG files. 40 | */ 41 | dir: 'src/assets/icons', 42 | /* 43 | * The regex that will be used for the Webpack rule. 44 | */ 45 | test: /\.(svg)(\?.*)?$/, 46 | /* 47 | * @see https://github.com/kisenka/svg-sprite-loader#configuration 48 | */ 49 | loaderOptions: { 50 | extract: true, // or false if you need the sprite to be automatically injected in the document.body 51 | spriteFilename: 'img/icons.[hash:8].svg' // or 'img/icons.svg' if filenameHashing == false 52 | }, 53 | /* 54 | * @see https://github.com/kisenka/svg-sprite-loader#configuration 55 | */ 56 | pluginOptions: { 57 | plainSprite: true 58 | } 59 | } 60 | } 61 | }; 62 | ``` 63 | 64 | ### Extra loaders 65 | 66 | It is possible to add extra Webpack loaders to this plugin. 67 | This can be useful if you want your icons to be optimized before the sprite is created. 68 | The following example can be created using the generator and uses [svgo](https://github.com/svg/svgo) and [svgo-loader](https://github.com/rpominov/svgo-loader) to accomplish this. 69 | 70 | Install extra dependencies: 71 | ```bash 72 | npm install svgo svgo-loader --save-dev 73 | ``` 74 | 75 | Add the loader to your Webpack config in your `vue.config.js` file: 76 | ```javascript 77 | module.exports = { 78 | chainWebpack: config => { 79 | config.module 80 | .rule('svg-sprite') 81 | .use('svgo-loader') 82 | .loader('svgo-loader'); 83 | } 84 | }; 85 | ``` 86 | 87 | ### Injected webpack-chain Rules 88 | 89 | - `config.module.rule('svg-sprite')` 90 | - `config.module.rule('svg-sprite').use('svg-sprite-loader')` 91 | - `config.plugin('svg-sprite')` 92 | 93 | ## Changelog 94 | 95 | Please see [CHANGELOG](CHANGELOG.md) for more information about what has changed recently. 96 | 97 | ## Contributing 98 | 99 | Please see [CONTRIBUTING](CONTRIBUTING.md) and [CODE_OF_CONDUCT](CODE_OF_CONDUCT.md) for details. 100 | 101 | ### Security 102 | 103 | If you discover any security related issues, please email security@swis.nl instead of using the issue tracker. 104 | 105 | ## Credits 106 | 107 | - [Jasper Zonneveld](https://github.com/JaZo) 108 | - [All Contributors](../../contributors) 109 | 110 | This package is a vue-cli 3 plugin wrapping [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader). Many thanks to [Stas Kurilov](https://github.com/kisenka) for his excellent package! 111 | 112 | ## License 113 | 114 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 115 | 116 | This package is [Treeware](https://treeware.earth). If you use it in production, then we ask that you [**buy the world a tree**](https://plant.treeware.earth/swisnl/vue-cli-plugin-svg-sprite) to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats. 117 | 118 | ## SWIS :heart: Open Source 119 | 120 | [SWIS](https://www.swis.nl) is a web agency from Leiden, the Netherlands. We love working with open source software. 121 | -------------------------------------------------------------------------------- /generator.js: -------------------------------------------------------------------------------- 1 | const chainWebpack = config => { 2 | config.module 3 | .rule('svg-sprite') 4 | .use('svgo-loader') 5 | .loader('svgo-loader') 6 | }; 7 | 8 | module.exports = (api, options, rootOptions) => { 9 | api.render('./template'); 10 | 11 | if (options.addSvgoLoader) { 12 | const fs = require('fs'); 13 | 14 | api.extendPackage({ 15 | devDependencies: { 16 | 'svgo': '^1.1.0', 17 | 'svgo-loader': '^2.1.0', 18 | }, 19 | }); 20 | 21 | let hasChainWebpackOption = false; 22 | const vueConfig = api.resolve('vue.config.js'); 23 | if (fs.existsSync(vueConfig)) { 24 | let projectOptions = require(vueConfig); 25 | if (projectOptions.chainWebpack) { 26 | hasChainWebpackOption = true; 27 | } 28 | } 29 | 30 | if (hasChainWebpackOption) { 31 | const {chalk} = require('@vue/cli-shared-utils'); 32 | 33 | const message = `Please add the following config to your ${chalk.cyan('chainWebpack')} method:` + 34 | '\n\n' + 35 | chalk.green(`config.module.rule('svg-sprite').use('svgo-loader').loader('svgo-loader');`); 36 | 37 | api.exitLog(message, 'info'); 38 | } else { 39 | api.extendPackage({ 40 | vue: { 41 | chainWebpack, 42 | }, 43 | }); 44 | } 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api, projectOptions) => { 2 | api.chainWebpack(webpackConfig => { 3 | const pluginOptions = projectOptions.pluginOptions ? projectOptions.pluginOptions.svgSprite || {} : {}; 4 | 5 | const dir = api.resolve(pluginOptions.dir || 'src/assets/icons'); 6 | 7 | webpackConfig.module 8 | .rule('svg-sprite') 9 | .test(pluginOptions.test || /\.(svg)(\?.*)?$/) 10 | .include 11 | .add(dir) 12 | .end() 13 | .use('svg-sprite-loader') 14 | .loader('svg-sprite-loader') 15 | .options(pluginOptions.loaderOptions || { 16 | extract: true, 17 | spriteFilename: projectOptions.filenameHashing ? 'img/icons.[hash:8].svg' : 'img/icons.svg', 18 | }); 19 | 20 | webpackConfig 21 | .plugin('svg-sprite') 22 | .use(require('svg-sprite-loader/plugin'), [pluginOptions.pluginOptions || { plainSprite: true }]); 23 | 24 | webpackConfig.module 25 | .rule('svg') 26 | .exclude 27 | .add(dir); 28 | }); 29 | }; 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-svg-sprite", 3 | "version": "1.1.0", 4 | "description": "vue-cli 3 plugin to build an SVG sprite", 5 | "keywords": [ 6 | "svg", 7 | "sprite", 8 | "vue-cli" 9 | ], 10 | "author": "Jasper Zonneveld ", 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/swisnl/vue-cli-plugin-svg-sprite.git" 14 | }, 15 | "homepage": "https://github.com/swisnl/vue-cli-plugin-svg-sprite#readme", 16 | "bugs": { 17 | "url": "https://github.com/swisnl/vue-cli-plugin-svg-sprite/issues" 18 | }, 19 | "license": "MIT", 20 | "main": "index.js", 21 | "scripts": { 22 | "test": "echo \"Error: no test specified\" && exit 1" 23 | }, 24 | "dependencies": { 25 | "svg-sprite-loader": "^6.0.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /prompts.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | name: 'addSvgoLoader', 4 | type: 'confirm', 5 | message: 'Add SVGO-loader to optimize your icons before the sprite is created?', 6 | default: true, 7 | }, 8 | ]; 9 | -------------------------------------------------------------------------------- /template/src/components/SvgIcon.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 40 | 41 | 48 | --------------------------------------------------------------------------------