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

Import Vue

Browse Source
This commit is contained in:
Cole Bemis 2017-01-28 15:03:26 -08:00
parent 9cbd7ca24d
commit 9ce3c68a9b
5 changed files with 8886 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8869
bundle.js
View File

File diff suppressed because it is too large Load Diff

10
index.html
View File

@ -18,26 +18,24 @@
stroke: currentColor; stroke: currentColor;
} }
</style> </style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<icon-container v-for="icon in icons" :name="icon"></icon-container> <!-- <icon-container v-for="icon in icons" :name="icon"></icon-container> -->
</div> </div>
<script type="text/x-template" id="icon-template"> <!-- <script type="text/x-template" id="icon-template">
<div class="icon"></div> <div class="icon"></div>
</script> </script>
<script type="text/x-template" id="icon-container-template"> <script type="text/x-template" id="icon-container-template">
<div class="icon-container"> <div class="icon-container">
<a :href="`./icons/${name}.svg`" download> <a :href="`icons/${name}.svg`" download>
<icon :name="name" size="48"></icon> <icon :name="name" size="48"></icon>
</a> </a>
</div> </div>
</script> </script> -->
<script src="bundle.js"></script> <script src="bundle.js"></script>
</body> </body>

1
package.json
View File

@ -5,6 +5,7 @@
"babel-core": "^6.22.1", "babel-core": "^6.22.1",
"babel-loader": "^6.2.10", "babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0", "babel-preset-es2015": "^6.22.0",
"vue": "^2.1.10",
"webpack": "^2.2.0" "webpack": "^2.2.0"
} }
} }

84
src/main.js
View File

@ -1,3 +1,5 @@
import Vue from 'vue';
const data = { const data = {
icons: [ icons: [
'square', 'square',
@ -7,50 +9,50 @@ const data = {
] ]
}; };
Vue.component('icon', { // Vue.component('icon', {
props: { // props: {
name: { // name: {
type: String, // type: String,
required: true // required: true
}, // },
size: { // size: {
type: String, // type: String,
default: '24' // default: '24'
} // }
}, // },
template: '#icon-template', // template: '#icon-template',
mounted() { // mounted() {
fetch(`./icons/${this.name}.svg`) // fetch(`./icons/${this.name}.svg`)
.then(response => { // .then(response => {
if (response.ok) { // if (response.ok) {
return response.text(); // return response.text();
} // }
throw new Error(`Cannot find ${this.name}.svg`); // throw new Error(`Cannot find ${this.name}.svg`);
}) // })
.then(svgText => { // .then(svgText => {
const svgDocument = new DOMParser().parseFromString(svgText, 'image/svg+xml'); // const svgDocument = new DOMParser().parseFromString(svgText, 'image/svg+xml');
const svgIcon = svgDocument.querySelector('svg').cloneNode(true); // const svgIcon = svgDocument.querySelector('svg').cloneNode(true);
svgIcon.setAttribute('width', this.size); // svgIcon.setAttribute('width', this.size);
svgIcon.setAttribute('height', this.size); // svgIcon.setAttribute('height', this.size);
this.$el.appendChild(svgIcon); // this.$el.appendChild(svgIcon);
}) // })
.catch(error => { // .catch(error => {
console.error(error); // console.error(error);
}); // });
} // }
}); // });
Vue.component('icon-container', { // Vue.component('icon-container', {
props: { // props: {
name: { // name: {
type: String, // type: String,
required: true // required: true
} // }
}, // },
template: '#icon-container-template' // template: '#icon-container-template'
}) // })
new Vue({ new Vue({
el: '#app', el: '#app',

5
webpack.config.js
View File

@ -14,5 +14,10 @@ module.exports = {
exclude: /node_modules/ exclude: /node_modules/
} }
] ]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
} }
} }