diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..d0c70a0 --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + ["es2015", {"modules": false}] + ] +} \ No newline at end of file diff --git a/bundle.js b/bundle.js index ac7cd60..b26b905 100644 --- a/bundle.js +++ b/bundle.js @@ -70,13 +70,8 @@ /* 0 */ /***/ (function(module, exports) { -const data = { - icons: [ - 'square', - 'circle', - 'rectangle-vertical', - 'rectangle-horizontal' - ] +var data = { + icons: ['square', 'circle', 'rectangle-vertical', 'rectangle-horizontal'] }; Vue.component('icon', { @@ -91,26 +86,25 @@ Vue.component('icon', { } }, template: '#icon-template', - mounted() { - fetch(`./icons/${this.name}.svg`) - .then(response => { - if (response.ok) { - return response.text(); - } - throw new Error(`Cannot find ${this.name}.svg`); - }) - .then(svgText => { - const svgDocument = new DOMParser().parseFromString(svgText, 'image/svg+xml'); - const svgIcon = svgDocument.querySelector('svg').cloneNode(true); + mounted: function mounted() { + var _this = this; - svgIcon.setAttribute('width', this.size); - svgIcon.setAttribute('height', this.size); + fetch('./icons/' + this.name + '.svg').then(function (response) { + if (response.ok) { + return response.text(); + } + throw new Error('Cannot find ' + _this.name + '.svg'); + }).then(function (svgText) { + var svgDocument = new DOMParser().parseFromString(svgText, 'image/svg+xml'); + var svgIcon = svgDocument.querySelector('svg').cloneNode(true); - this.$el.appendChild(svgIcon); - }) - .catch(error => { - console.error(error); - }); + svgIcon.setAttribute('width', _this.size); + svgIcon.setAttribute('height', _this.size); + + _this.$el.appendChild(svgIcon); + }).catch(function (error) { + console.error(error); + }); } }); @@ -122,7 +116,7 @@ Vue.component('icon-container', { } }, template: '#icon-container-template' -}) +}); new Vue({ el: '#app', diff --git a/package.json b/package.json index 198a5bd..9489c5d 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,9 @@ "name": "feather", "version": "0.0.0", "devDependencies": { + "babel-core": "^6.22.1", + "babel-loader": "^6.2.10", + "babel-preset-es2015": "^6.22.0", "webpack": "^2.2.0" } } diff --git a/webpack.config.js b/webpack.config.js index b96ca96..64dd856 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,5 +5,14 @@ module.exports = { output: { path: path.resolve(__dirname), filename: 'bundle.js' + }, + module: { + rules: [ + { + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/ + } + ] } } \ No newline at end of file