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 IconContainer component

Browse Source
This commit is contained in:
Cole Bemis 2017-01-28 22:19:59 -08:00
parent a85b7b6369
commit 6ebc2a095b
4 changed files with 35 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -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>

13
src/App.vue
View File

@ -1,14 +1,21 @@
<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>

22
src/IconContainer.vue Normal file
View File

@ -0,0 +1,22 @@
<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>

48
src/main.js
View File

@ -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'
// })