Icon 图标

介绍

图标组件，使用了阿里巴巴旗下的iconfont图标库，基于字体的图标集，可以通过Icon组件使用。

引入

在 main.js 中引入，详细介绍见快速上手。

使用

引入组件后，可以在Vue文件中使用

<vs-icon></vs-icon>

代码演示

按钮插槽

组件使用了Vue提供的插槽语法，支持插入文字，标签，还可以插入组件，默认文字为A Button。

<vs-icon></vs-icon>	<!-- 默认为Home标签 -->
<vs-icon>标签右边显示文字</vs-icon>	<!--通过插槽可以在图标右边插入文字-->
<vs-icon icon="上传">上传</vs-icon>	<!--通过icon属性改变图标，具体看下方表格-->

标签右边显示文字

上传

图标尺寸

字符串类型，icon被设计为正方形，长宽必须相等，仅支持通过size属性调整边长，需带单位px。

<vs-icon>默认24px*24px</vs-icon>
<vs-icon size="36px">边长36px*36px</vs-icon>

默认24px*24px

边长36px*36px

自定义颜色

支持修改图标的颜色（但不改变背景颜色，如需修改背景颜色需要在外层套一个盒子）。

<vs-icon color="red">红色图标</vs-icon>
<vs-icon color="#abc">RGB</vs-icon>
<vs-icon color="#abc4">RGBA</vs-icon>

红色图标

RGB

RGBA

图标库JSON

icon属性输入图标对应中文的name，对应关系如下JSON所示： 输入想要查看的图标名称：

{
    "icon_id": "31392109",
    "name": "方向-右",
    "font_class": "fangxiang-you",
    "unicode": "e6cd",
    "unicode_decimal": 59085
},
{
    "icon_id": "31392112",
    "name": "感叹号",
    "font_class": "gantanhao",
    "unicode": "e6ce",
    "unicode_decimal": 59086
},
{
    "icon_id": "31392113",
    "name": "个人",
    "font_class": "geren",
    "unicode": "e6cf",
    "unicode_decimal": 59087
},
{
    "icon_id": "31392114",
    "name": "关闭圆",
    "font_class": "guanbiyuan",
    "unicode": "e6d0",
    "unicode_decimal": 59088
},
{
    "icon_id": "31392115",
    "name": "警告",
    "font_class": "jinggao",
    "unicode": "e6d1",
    "unicode_decimal": 59089
},
{
    "icon_id": "31392116",
    "name": "链接",
    "font_class": "lianjie",
    "unicode": "e6d2",
    "unicode_decimal": 59090
},
{
    "icon_id": "31392117",
    "name": "时间",
    "font_class": "shijian",
    "unicode": "e6d3",
    "unicode_decimal": 59091
},
{
    "icon_id": "31392119",
    "name": "减少-框",
    "font_class": "jianshao-kuang",
    "unicode": "e6d4",
    "unicode_decimal": 59092
},
{
    "icon_id": "31392120",
    "name": "日期",
    "font_class": "riqi",
    "unicode": "e6d5",
    "unicode_decimal": 59093
},
{
    "icon_id": "31392121",
    "name": "上传",
    "font_class": "shangchuan",
    "unicode": "e6d6",
    "unicode_decimal": 59094
},
{
    "icon_id": "31392122",
    "name": "关闭",
    "font_class": "guanbi",
    "unicode": "e6d7",
    "unicode_decimal": 59095
},
{
    "icon_id": "31392123",
    "name": "搜索",
    "font_class": "sousuo",
    "unicode": "e6d8",
    "unicode_decimal": 59096
},
{
    "icon_id": "31392124",
    "name": "刷新",
    "font_class": "shuaxin",
    "unicode": "e6d9",
    "unicode_decimal": 59097
},
{
    "icon_id": "31392125",
    "name": "下载",
    "font_class": "xiazai",
    "unicode": "e6da",
    "unicode_decimal": 59098
},
{
    "icon_id": "31392126",
    "name": "提示",
    "font_class": "tishi",
    "unicode": "e6db",
    "unicode_decimal": 59099
},
{
    "icon_id": "31392127",
    "name": "选中",
    "font_class": "xuanzhong",
    "unicode": "e6dc",
    "unicode_decimal": 59100
},
{
    "icon_id": "31392129",
    "name": "文件",
    "font_class": "wenjian",
    "unicode": "e6dd",
    "unicode_decimal": 59101
},
{
    "icon_id": "31392130",
    "name": "增加-框",
    "font_class": "zengjia-kuang",
    "unicode": "e6de",
    "unicode_decimal": 59102
},
{
    "icon_id": "31392131",
    "name": "选中圆",
    "font_class": "xuanzhongyuan",
    "unicode": "e6df",
    "unicode_decimal": 59103
},
{
    "icon_id": "31392133",
    "name": "主页",
    "font_class": "zhuye",
    "unicode": "e6e0",
    "unicode_decimal": 59104
},
{
    "icon_id": "31392134",
    "name": "增加",
    "font_class": "zengjia",
    "unicode": "e6e1",
    "unicode_decimal": 59105
},
{
    "icon_id": "31392135",
    "name": "疑问",
    "font_class": "yiwen",
    "unicode": "e6e2",
    "unicode_decimal": 59106
}