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

Create Vue app

Browse Source
This commit is contained in:
Cole Bemis 2017-01-25 23:21:52 -08:00
parent 3afa82d3db
commit ab3cc7ef5a
2 changed files with 87 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
icons/circle.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"><circle cx="12" cy="12" r="10"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 214 B

96
index.html
View File

@ -3,23 +3,99 @@
<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 class="svg-container"></div>
<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 iconName = 'square';
const data = {
icons: [
'square',
'circle'
]
};
fetch(`./icons/${iconName}.svg`)
.then(response => response.text())
.then(svgText => {
const svgDocument = new DOMParser().parseFromString(svgText, 'image/svg+xml');
const svgIcon = svgDocument.querySelector('svg').cloneNode(true);
const svgContainer = document.querySelector('.svg-container');
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);
svgContainer.appendChild(svgIcon);
});
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>