组件

Iconfont 图标组件

提供基础 Iconfont 组件，业务需要设置变量引入自己的字体文件，通过传入 value 展示相应的图标 Code。如果需要引入多份字体文件，需要提供 theme 传入给 iconfont。

示例

代码节选自：yis-demo/src/pages/components/iconfont/index.js

import { Page, Iconfont } from "@qnpm/yis/components";
import { PageCore } from "@qnpm/yis";
import styles from "./main.css";

export default class IconfontDemo extends PageCore {
    render() {
        return (
            <Page>
                <div className={styles.container}>
                    <p> iconfont </p>
                    <Iconfont value="&#xe331;" className="test" />
                </div>
            </Page>
        );
    }
}

Iconbutton 组件

该组件是对 Button 组件进行的封装，添加了点击事件和水波纹效果。可参考 Button 组件对 Iconbutton 组件进行样式控制

示例

代码节选自：yis-demo/src/pages/components/iconfont/index.js

import { Page, Button, IconButton } from "@qnpm/yis/components";
import { PageCore } from "@qnpm/yis";
import classnames from "classnames";
import styles from "./main.css";

export default class IconfontDemo extends PageCore {
    render() {
        return (
            <Page>
                <div className={styles.container}>
                    <p> button with icon </p>
                    <Button
                        icon="&#xe331;"
                        label="Inbox"
                        primary
                        ripple={true}
                    />
                </div>
                <div className={styles.container}>
                    <p> iconButton </p>
                    <IconButton value="&#xe348;" onTouchTap={() => {
                        console.log('我被点了')
                    }}/>
                    <p> iconButton </p>
                    <IconButton value="&#xe331;" accent />
                    <p> iconButton </p>
                    <IconButton value="&#xe331;" primary />
                    <p className={styles.px}/>
                </div>
            </Page>
        );
    }
}

样式变量

提供全局默认 iconfont 配置。

    --iconfont-default-name: yis;
    --iconfont-href-path: https\://s.qunarzz.com/yis/font/0.0.1;

参数

参数名	类型	必选	默认值	描述
value	string	√	无	iconfont code码
className	string	×	无	根节点类名