Icon fonts and SVG sprite are not included here. I'm talking about an icon system that can let users import icons by demand.
There are three major ways of exposing API of an icon component in Vue.js and each one of them has its own pros & cons:
A single component (eg. <v-icon>), let users pass a name/type prop to specify the actual icon.
Icon data are registered into a global “pool” like:
安装：
npm i --save veui veui-theme-one
npm i --save-dev veui-loader babel-plugin-veui babel-plugin-lodash
创建 vue.config.js：
| throw new Error('Error from Gist!'); |
| // sort an array of DOM nodes according to the HTML tree order | |
| // http://www.w3.org/TR/html5/infrastructure.html#tree-order | |
| function sortNodes(nodes) { | |
| nodes.sort(function (a, b) { | |
| var posCompare = a.compareDocumentPosition(b); | |
| if (posCompare & 4 || posCompare & 16) { | |
| // a < b | |
| return -1; | |
| } else if (posCompare & 2 || posCompare & 8) { |
| [ | |
| [ | |
| "content" | |
| ], | |
| [ | |
| "position", | |
| "z-index", | |
| "top", | |
| "right", | |
| "bottom", |
| function createStyle(styleText) { | |
| var style = document.createElement('style'); | |
| style.type = 'text/css'; | |
| // <style> element must be appended into DOM before setting `cssText` | |
| // otherwise IE8 will interpret the text in IE7 mode. | |
| document.body.appendChild(style); | |
| if (style.styleSheet) { | |
| style.styleSheet.cssText = styleText; | |
| } else { |
| <!doctype html> | |
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="author" content="Gu Yiling"> |