Skip to content

F
feather
Commit ab3cc7ef authored by Cole Bemis's avatar Cole Bemis
Browse files
Options

Create Vue app

parent 3afa82d3
Hide whitespace changes
Inline Side-by-side
Showing with 87 additions and 10 deletions
icons/circle.svg 0 → 100644
View file @ ab3cc7ef
<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>
\ No newline at end of file
index.html
View file @ ab3cc7ef
...@@ -3,23 +3,99 @@ ...@@ -3,23 +3,99 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Feather</title> <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> </head>
<body> <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> <script>
const iconName = 'square'; const data = {
icons: [
'square',
'circle'
]
};
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);
});
}
});
fetch(`./icons/${iconName}.svg`) Vue.component('icon-container', {
.then(response => response.text()) props: {
.then(svgText => { name: {
const svgDocument = new DOMParser().parseFromString(svgText, 'image/svg+xml'); type: String,
const svgIcon = svgDocument.querySelector('svg').cloneNode(true); required: true
const svgContainer = document.querySelector('.svg-container'); }
},
template: '#icon-container-template'
})
svgContainer.appendChild(svgIcon); new Vue({
}); el: '#app',
data: data
});
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023