demo 原始链接:https://vux.li/demos/v2/#/component/x-icon
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <cell title=\"used in cell\">\n <x-icon type=\"ios-plus\" class=\"cell-x-icon\" @click=\"console\"></x-icon>\n </cell>\n </group>\n <div style=\"padding: 15px;\">\n <x-icon type=\"ios-ionic-outline\" size=\"30\"></x-icon>\n <x-icon type=\"ios-arrow-back\" size=\"30\"></x-icon>\n <x-icon type=\"ios-arrow-forward\" size=\"30\"></x-icon>\n <x-icon type=\"ios-arrow-up\" size=\"30\"></x-icon>\n <x-icon type=\"ios-arrow-right\" size=\"30\"></x-icon>\n <x-icon type=\"ios-arrow-down\" size=\"30\"></x-icon>\n <x-icon type=\"ios-arrow-left\" size=\"30\"></x-icon>\n <x-icon type=\"ios-arrow-thin-up\" size=\"30\"></x-icon>\n <x-icon type=\"ios-arrow-thin-right\" size=\"30\"></x-icon>\n <x-icon type=\"ios-arrow-thin-down\" size=\"30\"></x-icon>\n <x-icon type=\"ios-arrow-thin-left\" size=\"30\"></x-icon>\n <x-icon type=\"ios-circle-filled\" size=\"30\"></x-icon>\n <x-icon type=\"ios-circle-outline\" size=\"30\"></x-icon>\n <x-icon type=\"ios-checkmark-empty\" size=\"30\"></x-icon>\n <x-icon type=\"ios-checkmark-outline\" size=\"30\"></x-icon>\n <x-icon type=\"ios-checkmark\" size=\"30\"></x-icon>\n <x-icon type=\"ios-plus-empty\" size=\"30\"></x-icon>\n <x-icon type=\"ios-plus-outline\" size=\"30\"></x-icon>\n <x-icon type=\"ios-plus\" size=\"30\"></x-icon>\n <x-icon type=\"ios-close-empty\" size=\"30\"></x-icon>\n <x-icon type=\"ios-close-outline\" size=\"30\"></x-icon>\n <x-icon type=\"ios-close\" size=\"30\"></x-icon>\n <x-icon type=\"ios-minus-empty\" size=\"30\"></x-icon>\n <x-icon type=\"ios-minus-outline\" size=\"30\"></x-icon>\n <x-icon type=\"ios-minus\" size=\"30\"></x-icon>\n <x-icon type=\"ios-information-empty\" size=\"30\"></x-icon>\n <x-icon type=\"ios-information-outline\" size=\"30\"></x-icon>\n <x-icon type=\"ios-information\" size=\"30\"></x-icon>\n <x-icon type=\"ios-help-empty\" size=\"30\"></x-icon>\n <x-icon type=\"ios-help-outline\" size=\"30\"></x-icon>\n <x-icon type=\"ios-help\" size=\"30\"></x-icon>\n <x-icon type=\"ios-search\" size=\"30\"></x-icon>\n <x-icon type=\"ios-search-strong\" size=\"30\"></x-icon>\n <x-icon type=\"ios-star\" size=\"30\"></x-icon>\n <x-icon type=\"ios-star-half\" size=\"30\"></x-icon>\n <x-icon type=\"ios-star-outline\" size=\"30\"></x-icon>\n <x-icon type=\"ios-heart\" size=\"30\"></x-icon>\n <x-icon type=\"ios-heart-outline\" size=\"30\"></x-icon>\n </div>\n </div>\n</template>\n\n<script>\nimport { Group, Cell } from 'vux'\n\nexport default {\n components: {\n Group,\n Cell\n },\n methods: {\n console () {\n console.log('click')\n }\n }\n}\n</script>\n\n<style>\n.vux-x-icon {\n fill: #F70968;\n}\n.cell-x-icon {\n display: block;\n fill: green;\n}\n</style>\n
\n