mirror/feather
1
0
Fork 0
mirror of https://github.com/feathericons/feather.git synced 2023-08-10 21:13:24 +03:00
Code Issues Projects Releases Wiki Activity

Move script to main.js

Browse Source
This commit is contained in:
Cole Bemis 2017-01-28 13:30:51 -08:00
parent 7ce70f6c62
commit 4bb2702015
2 changed files with 59 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
index.html
View File

@ -39,65 +39,6 @@
</div> </div>
</script> </script>
<script> <script src="src/main.js"></script>
const data = {
icons: [
'square',
'circle',
'rectangle-vertical',
'rectangle-horizontal'
]
};
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);
this.$el.appendChild(svgIcon);
})
.catch(error => {
console.error(error);
});
}
});
Vue.component('icon-container', {
props: {
name: {
type: String,
required: true
}
},
template: '#icon-container-template'
})
new Vue({
el: '#app',
data: data
});
</script>
</body> </body>
</html> </html>

58
src/main.js Normal file
View File

@ -0,0 +1,58 @@
const data = {
icons: [
'square',
'circle',
'rectangle-vertical',
'rectangle-horizontal'
]
};
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);
this.$el.appendChild(svgIcon);
})
.catch(error => {
console.error(error);
});
}
});
Vue.component('icon-container', {
props: {
name: {
type: String,
required: true
}
},
template: '#icon-container-template'
})
new Vue({
el: '#app',
data: data
});