mirror of
https://github.com/feathericons/feather.git
synced 2023-08-10 21:13:24 +03:00
103 lines
2.1 KiB
HTML
103 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Feather</title>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
line-height: 0;
|
|
}
|
|
|
|
.icon > svg {
|
|
stroke: currentColor;
|
|
}
|
|
</style>
|
|
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="app">
|
|
<icon-container v-for="icon in icons" :name="icon"></icon-container>
|
|
</div>
|
|
|
|
<script type="text/x-template" id="icon-template">
|
|
<div class="icon"></div>
|
|
</script>
|
|
|
|
<script type="text/x-template" id="icon-container-template">
|
|
<div class="icon-container">
|
|
<a :href="`./icons/${name}.svg`" download>
|
|
<icon :name="name" size="48"></icon>
|
|
</a>
|
|
</div>
|
|
</script>
|
|
|
|
<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>
|
|
</html> |