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

Browse Source
This commit is contained in:
Cole Bemis 2017-01-28 22:01:30 -08:00
parent 4c6b7ad3b8
commit a85b7b6369
4 changed files with 53 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -9,14 +9,7 @@
margin: 0; margin: 0;
} }
.icon {
display: inline-block;
line-height: 0;
}
.icon > svg {
stroke: currentColor;
}
</style> </style>
</head> </head>
<body> <body>

2
package.json
View File

@ -9,6 +9,8 @@
"babel-loader": "^6.2.10", "babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0", "babel-preset-es2015": "^6.22.0",
"css-loader": "^0.26.1", "css-loader": "^0.26.1",
"stylus": "^0.54.5",
"stylus-loader": "^2.4.0",
"vue": "^2.1.10", "vue": "^2.1.10",
"vue-loader": "^10.1.2", "vue-loader": "^10.1.2",
"vue-template-compiler": "^2.1.10", "vue-template-compiler": "^2.1.10",

3
src/App.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<div>Hello World</div> <div><icon name="square" size="48"></icon></div>
</template> </template>
<script> <script>
import {mapState} from 'vuex'; import {mapState} from 'vuex';
import Icon from './Icon';
export default { export default {
name: 'App', name: 'App',

49
src/Icon.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<div class="icon"></div>
</template>
<script>
export default {
name: 'Icon',
props: {
name: {
type: String,
required: true
},
size: {
type: String,
default: '24'
}
},
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);
});
}
}
</script>
<style lang="stylus">
.icon
display inline-block
line-height 0
.icon > svg
stroke currentColor
</style>