Icons

import React, { Fragment } from 'react';
import { Row, Col, SvgIcon, Subtitle } from 'seduo-ui';
const icons = [
    {
        kind: 'ArrowUp',
    },
    {
        kind: 'ArrowDown',
    },
    {
        kind: 'ArrowLeft',
    },
    {
        kind: 'ArrowRight',
    },
    {
        kind: 'Box',
    },
    {
        kind: 'BoxArrowIn',
    },
    {
        kind: 'BoxArrowOut',
    },
    {
        kind: 'LongArrowRight',
    },
    {
        kind: 'Close',
        className: 'docs-example--svg',
    },
    {
        kind: 'Menu',
        className: 'docs-example--svg',
    },
    {
        kind: 'Notes',
    },
    {
        kind: 'NotFound',
    },
    {
        kind: 'Phone',
    },
    {
        kind: 'Envelope',
    },
    {
        kind: 'PostOpen',
    },
    {
        kind: 'Power',
    },
    {
        kind: 'Briefcase',
    },
    {
        kind: 'Plus',
    },
    {
        kind: 'Settings',
    },
    {
        kind: 'PlusCircle',
    },
    {
        kind: 'People',
    },
    {
        kind: 'ExclamationMarkTriangle',
    },
    {
        kind: 'InfoCircle',
    },
    {
        kind: 'CheckCircle',
    },
    {
        kind: 'CloseCircle',
    },
    {
        kind: 'Certificate',
    },
    {
        kind: 'PencilOnPaper',
    },
    {
        kind: 'RemoveCircle',
    },
    {
        kind: 'Clock',
    },
    {
        kind: 'Star',
    },
    {
        kind: 'StarOutline',
    },
    {
        kind: 'GraduationCap',
    },
    {
        kind: 'GraduationCapCircle',
    },
    {
        kind: 'GraduationCapOutline',
    },
    {
        kind: 'House',
    },
    {
        kind: 'HouseCircle',
    },
    {
        kind: 'Calendar',
    },
    {
        kind: 'Ban',
    },
    {
        kind: 'Trash',
    },
    {
        kind: 'Play',
    },
    {
        kind: 'PlayOutline',
    },
    {
        kind: 'PlayOutlineCircle',
    },
    {
        kind: 'PlayCircle',
    },
    {
        kind: 'Download',
    },
    {
        kind: 'Reload',
    },
    {
        kind: 'Categories',
    },
    {
        kind: 'Search',
    },
    {
        kind: 'Stats',
    },
    {
        kind: 'StatsCircle',
    },
    {
        kind: 'Frown',
    },
    {
        kind: 'Smile',
    },
    {
        kind: 'Meh',
    },
    {
        kind: 'Building',
    },
    {
        kind: 'Bell',
    },
    {
        kind: 'Bulb',
    },
    {
        kind: 'Filter',
    },
    {
        kind: 'PaperPlane',
    },
    {
        kind: 'User',
    },
    {
        kind: 'hollowCutFacebook',
    },
    {
        kind: 'hollowCutInstagram',
    },
    {
        kind: 'hollowCutLinkedIn',
    },
    {
        kind: 'hollowCutTwitter',
    },
    {
        kind: 'hollowCutYoutube',
    },
    {
        kind: 'AllCategories',
    },
    {
        kind: 'Communication',
    },
    {
        kind: 'HrLaw',
    },
    {
        kind: 'HrLaw2',
    },
    {
        kind: 'Languages',
    },
    {
        kind: 'Leadership',
    },
    {
        kind: 'Marketing',
    },
    {
        kind: 'Marketing2',
    },
    {
        kind: 'PersonalDevelopment',
    },
    {
        kind: 'Presentation',
    },
    {
        kind: 'Productivity',
    },
    {
        kind: 'Projects',
    },
    {
        kind: 'Projects2',
    },
    {
        kind: 'Sales',
    },
    {
        kind: 'Software',
    },
    {
        kind: 'Display',
    },
    {
        kind: 'Business',
    },
    {
        kind: 'Business2',
    },
    {
        kind: 'Business3',
    },
    {
        kind: 'Cloud',
    },
    {
        kind: 'Events',
    },
    {
        kind: 'Messages',
    },
    {
        kind: 'ThumbUp',
    },
    {
        kind: 'TrendingUp',
    },
    {
        kind: 'Cookie',
    },
    {
        kind: 'Sound',
    },
    {
        kind: 'Bookmark',
    },
    {
        kind: 'Chevron',
    },
    {
        kind: 'UserCircle',
    },
    {
        kind: 'ImportantDevices',
    },
    {
        kind: 'HourGlass',
    },
    {
        kind: 'Facebook',
    },
    {
        kind: 'Eye',
    },
    {
        kind: 'EyeBlocked',
    },
    {
        kind: 'Cross',
    },
    {
        kind: 'Checkmark',
    },
    {
        kind: 'Mobile',
    },
    {
        kind: 'Trophy',
    },
    {
        kind: 'Oops',
    },
    {
        kind: 'AlarmBellTimer',
    },
    {
        kind: 'AppWindowEdit',
    },
    {
        kind: 'EmailActionCheck',
    },
    {
        kind: 'Cashback',
    },
    {
        kind: 'CheckList',
    },
    {
        kind: 'Metronome',
    },
    {
        kind: 'PlayRectangle',
    },
];
export default class Example extends React.Component {
    render() {
        return (
            <Fragment>
                <Row>
                    {icons.map((icon) => (
                        <Col xs={6} sm={4} md={4} lg={3} xl={2} className={`text-center mb-7 ${icon.className || ''}`}>
                            <SvgIcon kind={icon.kind} />
                            <Subtitle>{icon.kind}</Subtitle>
                        </Col>
                    ))}
                </Row>
            </Fragment>
        );
    }
}

SvgIcon.propTypes = {
    className: PropTypes.string,
    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    kind: PropTypes.oneOf([...]).isRequired, // Kind of icon
    onClick: PropTypes.func,
    preview: PropTypes.bool,
    size: PropTypes.number,
    style: PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object
    ]),
    wrapperStyle: PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object
    ])
};

SvgIcon.defaultProps = {
    size: 32,
};

Icon Sizes

If you do not want to use the optional icon sizes, we also have predefined sizes.

import React, { Fragment } from 'react';
import { Row, Col, SvgIcon } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Fragment>
                <div className="flex-row">
                    <SvgIcon kind="Smile" className="icon icon-dark" />
                </div>
                <div className="flex-row">
                    <SvgIcon kind="Smile" className="icon icon-dark icon-2x" />
                </div>
                <div className="flex-row">
                    <SvgIcon kind="Smile" className="icon icon-dark icon-3x" />
                </div>
                <div className="flex-row">
                    <SvgIcon kind="Smile" className="icon icon-dark icon-4x" />
                </div>
                <div className="flex-row">
                    <SvgIcon kind="Smile" className="icon icon-dark icon-5x" />
                </div>
                <div className="flex-row">
                    <SvgIcon kind="Smile" className="icon icon-dark icon-7x" />
                </div>
            </Fragment>
        );
    }
}