Skip to content

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

Create IconContainer component

parent a85b7b63
Show whitespace changes
Inline Side-by-side
Showing with 35 additions and 78 deletions
index.html
View file @ 6ebc2a09
...@@ -3,33 +3,9 @@ ...@@ -3,33 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Feather</title> <title>Feather</title>
<style>
body {
margin: 0;
}
</style>
</head> </head>
<body> <body>
<div id="app"></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 src="bundle.js"></script> <script src="bundle.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
src/App.vue
View file @ 6ebc2a09
<template> <template>
<div><icon name="square" size="48"></icon></div> <div>
<icon-container v-for="icon in icons" :name="icon"></icon-container>
</div>
</template> </template>
<script> <script>
import {mapState} from 'vuex'; import {mapState} from 'vuex';
import Icon from './Icon'; import IconContainer from './IconContainer';
export default { export default {
name: 'App', name: 'App',
components: {Icon}, components: {IconContainer},
computed: mapState(['icons']) computed: mapState(['icons'])
} }
</script> </script>
<style lang="stylus">
body
margin 0
</style>
\ No newline at end of file
src/IconContainer.vue 0 → 100644
View file @ 6ebc2a09
<template>
<div class="icon-container">
<a :href="`icons/${name}.svg`" download>
<icon :name="name" size="48"></icon>
</a>
</div>
</template>
<script>
import Icon from './Icon';
export default {
name: 'IconContainer',
components: {Icon},
props: {
name: {
type: String,
required: true
}
}
}
</script>
\ No newline at end of file
src/main.js
View file @ 6ebc2a09
...@@ -23,51 +23,3 @@ new Vue({ ...@@ -23,51 +23,3 @@ new Vue({
components: {App}, components: {App},
template: '<app/>' template: '<app/>'
}); });
// 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'
// })
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