mirror of
https://github.com/feathericons/feather.git
synced 2023-08-10 21:13:24 +03:00
Import Vue
This commit is contained in:
84
src/main.js
84
src/main.js
@ -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',
|
||||
|
Reference in New Issue
Block a user