├── .gitignore
├── IconComponent.vue
├── LICENSE
├── README.md
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | vendor
2 | node_modules
3 | package-lock.json


--------------------------------------------------------------------------------
/IconComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <object data="require(`SVGPATH/${icon}.svg`)" type="`${icon}.svg`"></object>  
 3 | </template> 
 4 | <script>
 5 | 
 6 | export default {
 7 |     name: 'IconComponent',
 8 |     data() {
 9 |         return {
10 |             
11 |         }
12 |     },
13 |     props: {
14 |         'icon': {
15 |             type: String
16 |         }
17 |     }
18 | }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Excellent Ingenuity LLC & James Johnson
 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 all
13 | 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 THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # laravel-mix-vue-svgicon
 2 | 
 3 | Laravel Mix extension that provides loading svgs as a vue component named icon, compatible with Adam Wathan's Blade extension. This package is inspired by the post by Caleb Porzio - [Using inline SVGs in Vue components.](http://calebporzio.com/using-inline-svgs-in-vue-compoments/)
 4 | 
 5 | ## Installation
 6 | `npm install laravel-mix-vue-svgicon`
 7 | 
 8 | ## Setup
 9 | In your `webpack.mix.js` to the top of the file, add: `require('laravel-mix-vue-svgicon');` . 
10 | 
11 | Then in your `mix` method chain add: `.svgicon('your path here')`.
12 | 
13 | If you do not provide a path to the method, the default path is `./../public/resources/svg` to provide compatability with [Adam Wathan's Blade SVG package.](https://github.com/adamwathan/blade-svg)
14 | 
15 | **Note the path that** `.svgicon()` **takes is relative to the root directory where your webpack.mix.js file resides. If your path is incorrect then the extension will not work and webpack will throw an error that it cannot load the module `SVGPATH`.**
16 | 
17 | ## Usage
18 | 
19 | ### Default
20 | 
21 | Once you have the package installed and the mix extension active you may use the icon component like anyother vue.js component. The sole property that the component takes is the name of the file under the svg directory you provided to the mix method. E.g., file is `resources/svg/close.svg`, `webpack.mix.js` includes `mix.svgicon(resources/svg)` and the consuming vue component looks like this:
22 | 
23 | ```javascript
24 | <template>
25 |     <div class="w-1/4 flex flex-row justify-end" v-tooltip.right-start="{content: 'Cancel', classes: 'tooltip'}">
26 |         <button class="text-black hover:text-white w-6 h-6 p-1 rounded hover:bg-red-dark" v-on:click.stop="cancel">
27 |             <icon icon="close" class="w-full fill-current stroke-current"></icon>               
28 |         </button>
29 |     </div>
30 | </template>
31 | <script>
32 | 
33 | import Icon from 'laravel-mix-vue-svgicon/IconComponent.vue';
34 | 
35 | export default {
36 |     props: [
37 |         'route'
38 |     ],
39 |     data: function() {
40 |         return {
41 |         
42 |         }
43 |     },
44 |     methods:{
45 |         cancel: function(event) {
46 |             var vm = this;
47 |             window.location.href = vm.route;
48 |         }
49 |     },
50 |     components: {
51 |         Icon,
52 |     }
53 | }
54 | </script>
55 | ```
56 | ### Additional Child Directories
57 | 
58 | Additionally, nested folders of svg's under the svg root directory provided to the mix method can be accessed by simply giving the component the relative path & file name, minus the file extension. E.g., the `resources/svg` folder contains a folder `zondicons`.
59 | 
60 | ```javascript
61 | <template>
62 |     <div class="w-1/4 flex flex-row justify-end" v-tooltip.right-start="{content: 'Cancel', classes: 'tooltip'}">
63 |         <button class="text-black hover:text-white w-6 h-6 p-1 rounded hover:bg-red-dark" v-on:click.stop="cancel">
64 |             <icon icon="zondicons/close" class="w-full fill-current stroke-current"></icon>               
65 |         </button>
66 |     </div>
67 | </template>
68 | <script>
69 | 
70 | import Icon from 'laravel-mix-vue-svgicon/IconComponent.vue';
71 | 
72 | export default {
73 |     props: [
74 |         'route'
75 |     ],
76 |     data: function() {
77 |         return {
78 |         
79 |         }
80 |     },
81 |     methods:{
82 |         cancel: function(event) {
83 |             var vm = this;
84 |             window.location.href = vm.route;
85 |         }
86 |     },
87 |     components: {
88 |         Icon,
89 |     }
90 | }
91 | </script>
92 | <style lang="scss">
93 | 
94 | </style>
95 | ```
96 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | const mix = require('laravel-mix');
  2 | const path = require('path');
  3 | 
  4 | class SVGIcon {
  5 |     
  6 |     name() {
  7 |         return 'svgicon'
  8 |     }
  9 |     
 10 |     dependencies() {
 11 |         return ['img-loader', 'imagemin-svgo', 'raw-loader', 'fs', 'svg-vue'];
 12 |     }
 13 | 
 14 |     register(options) {
 15 |         this.options = Object.assign({
 16 |             svgPath: 'resources/svg',
 17 |             extract: false,
 18 |             svgoSettings: [
 19 |                 { removeTitle: true },
 20 |                 { removeViewBox: false },
 21 |                 { removeDimensions: true }
 22 |             ]
 23 |         }, options);
 24 | 
 25 |         this.includePath = path.resolve(__dirname, process.cwd() + '/' + this.options.svgPath);
 26 |     }
 27 | 
 28 |     boot() {
 29 |         Mix.listen('configReady', config => {
 30 |             config.module.rules.map(r => {
 31 |                 if (this._isSvgRegExp(r.test) && ! this._isSvgVueRule(r)) {
 32 |                     r.exclude = path.resolve(__dirname, process.cwd() + '/' + this.options.svgPath);
 33 |                 }
 34 |             });
 35 |         });
 36 |     }
 37 | 
 38 |     webpackRules() {
 39 |         return {
 40 |             test: /\.svg$/,
 41 |             include: [
 42 |                 this.includePath
 43 |             ],
 44 |             loaders: [
 45 |                 {
 46 |                     loader: 'raw-loader'
 47 |                 },
 48 | 
 49 |                 {
 50 |                     loader: 'img-loader',
 51 |                     options: {
 52 |                         plugins: [
 53 |                             require('imagemin-svgo')({ plugins: this.options.svgoSettings })
 54 |                         ]
 55 |                     }
 56 |                 }
 57 |             ]
 58 |         }
 59 |     }
 60 | 
 61 |     webpackConfig(webpackConfig) {
 62 |         let fs = require('fs');
 63 | 
 64 |         fs.mkdir(this.includePath, error => {
 65 |             if (error && error.code === 'EEXIST') return null;
 66 |         });
 67 | 
 68 |         webpackConfig.resolve.alias['svg-files-path'] = this.includePath;
 69 | 
 70 |         if (this.options.extract) {
 71 |             let svgAssetsObj = {
 72 |                 test: this.includePath,
 73 |                 name: '/js/svg',
 74 |                 chunks: 'all',
 75 |                 enforce: true
 76 |             }
 77 | 
 78 |             if (webpackConfig.optimization.hasOwnProperty('splitChunks')) {
 79 |                 webpackConfig.optimization.splitChunks.cacheGroups['svgAssets'] = svgAssetsObj;
 80 |             } else {
 81 |                 webpackConfig.optimization = {
 82 |                     splitChunks: {
 83 |                         cacheGroups: {
 84 |                             svgAssets: svgAssetsObj
 85 |                         }
 86 |                     }
 87 |                 }
 88 |             }
 89 |         }
 90 |     }
 91 | 
 92 |     _isSvgRegExp(pattern) {
 93 |         let regExCheck = new RegExp(pattern);
 94 | 
 95 |         return regExCheck.test('.svg') || regExCheck.test('font.svg');
 96 |     }
 97 | 
 98 |     _isSvgVueRule(rule) {
 99 |         if (rule.hasOwnProperty('include')) {
100 |             return rule.include.includes(this.includePath);
101 |         }
102 | 
103 |         return false;
104 |     }
105 | 
106 | }
107 | 
108 | mix.extend('svgicon', new SVGIcon());
109 | 
110 | module.exports = SVGIcon;
111 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "laravel-mix-vue-svgicon",
 3 |   "version": "2.1.0",
 4 |   "description": "Laravel Mix extension that provides loading svgs as a vue component named icon, compatible with Adam Wathan's Blade extension.",
 5 |   "main": "index.js",
 6 |   "repository": {
 7 |     "url": "https://github.com/excellentingenuity/laravel-mix-vue-svgicon"
 8 |   },
 9 |   "scripts": {
10 |     "test": "echo \"Error: no test specified\" && exit 1"
11 |   },
12 |   "keywords": [
13 |     "laravel",
14 |     "laravel-mix",
15 |     "svg",
16 |     "vue"
17 |   ],
18 |   "author": "Excellent InGenuity LLC - James Johnson",
19 |   "license": "MIT",
20 |   "devDependencies": {
21 |     "eslint": "^5.16.0",
22 |     "imagemin": "^6.1.0"
23 |   },
24 |   "peerDependencies": {
25 |     "laravel-mix": ">=5.0.4"
26 |   },
27 |   "dependencies": {
28 |     "html-loader": "^1.1.0",
29 |     "laravel-mix": "^5.0.4",
30 |     "imagemin": "^6.1.0",
31 |     "imagemin-svgo": "^7.0.0",
32 |     "img-loader": "^3.0.1",
33 |     "raw-loader": "^4.0.0",
34 |     "svg-vue": "^0.1.1"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------