Import Vue

This commit is contained in:
Cole Bemis
2017-01-28 15:03:26 -08:00
parent 9cbd7ca24d
commit 9ce3c68a9b
5 changed files with 8886 additions and 83 deletions

View File

@ -1,3 +1,5 @@
import Vue from 'vue';
const data = {
icons: [
'square',
@ -7,50 +9,50 @@ const data = {
]
};
Vue.component('icon', {
props: {
name: {
type: String,
required: true
},
size: {
type: String,
default: '24'
}
},
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);
// Vue.component('icon', {
// props: {
// name: {
// type: String,
// required: true
// },
// size: {
// type: String,
// default: '24'
// }
// },
// 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);
svgIcon.setAttribute('width', this.size);
svgIcon.setAttribute('height', this.size);
// svgIcon.setAttribute('width', this.size);
// svgIcon.setAttribute('height', this.size);
this.$el.appendChild(svgIcon);
})
.catch(error => {
console.error(error);
});
}
});
// this.$el.appendChild(svgIcon);
// })
// .catch(error => {
// console.error(error);
// });
// }
// });
Vue.component('icon-container', {
props: {
name: {
type: String,
required: true
}
},
template: '#icon-container-template'
})
// Vue.component('icon-container', {
// props: {
// name: {
// type: String,
// required: true
// }
// },
// template: '#icon-container-template'
// })
new Vue({
el: '#app',