diginet-core-ui 1.4.39 → 1.4.40

package/src/icons/basic.stories.js

@@ -0,0 +1,178 @@
+import { Notify as AlertNotify, TextInput, Typography } from 'components';
+import ImportComp from 'components/others/import';
+import React, { Fragment, useState } from 'react';
+import * as IconsBasic from './basic';
+import IconEffect from './effect';
+// import * as GeneralIcons from './general';
+
+export default {
+    title: 'Icon / Basic',
+    component: IconEffect,
+    argTypes: {
+        color: { control: 'color' },
+    },
+};
+
+const styles = {
+    container: {
+        display: 'grid',
+        fontFamily: 'sans-serif',
+        fontWeight: 700,
+        fontSize: '16px',
+        gridGap: '5px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+        gridTemplateRows: 'repeat(auto-fit, minmax(100px, 1fr))',
+        // alignItems: 'center',
+        textAlign: 'center',
+        justifyItems: 'center',
+    },
+    frames: {
+        display: 'block',
+        fontFamily: 'sans-serif',
+        fontWeight: 700,
+        fontSize: '16px',
+    },
+    type: {
+        margin: '10px 50px',
+    },
+    title: {
+        marginTop: '10px',
+        minWidth: 100,
+        wordBreak: 'break-word',
+    },
+    content: {
+        display: 'contents',
+        margin: '10px 30px',
+        width: '300px',
+        justifyContent: 'space-between',
+        cursor: 'copy',
+    },
+};
+
+const onclick = (key, cb) => {
+    const temp_input = document.createElement('input');
+    temp_input.value = `import { ${key} } from 'diginet-core-ui/icons';`;
+    document.body.appendChild(temp_input);
+    temp_input.select();
+    temp_input.setSelectionRange(0, 99999);
+    document.execCommand('copy');
+    temp_input.remove();
+    !!cb && cb();
+};
+
+const hiddenBasicIcons = [
+    'AddCircle',
+    'PlusFilled',
+    'Success',
+    'CalendarNew',
+    'CalendarBlankRounded',
+    'Close',
+    'CloseOutline',
+    'CloseUnderline',
+    'EditV2',
+    'Failed',
+    'LogoutV2',
+    'SaveV2',
+    'Send',
+    'ZoomOutMap',
+];
+
+const Template = args => {
+    const [search, setSearch] = useState('');
+    const pattern = new RegExp(search, 'i');
+    let Notify = null;
+    return (
+        <>
+            <ImportComp components={'Icon'} />
+            <div style={styles.frames}>
+                <Typography type={'t1'}>Basic Icons</Typography>
+                <br />
+                <Typography type={'h1'}>Click on icon to copy import</Typography>
+                <br />
+                <div style={styles.content}>
+                    <TextInput
+                        icon={'search'}
+                        variant={'box'}
+                        label={'Tìm kiếm'}
+                        placeholder={'Nhập tên icon'}
+                        onChange={e => setSearch(e.target.value)}
+                    />
+                </div>
+                <div style={styles.container}>
+                    {Object.keys(IconsBasic)
+                        .filter(hiddenIcons => !hiddenBasicIcons.includes(hiddenIcons))
+                        .map((key, index) => {
+                            if (pattern.test(key)) {
+                                const Comp = IconsBasic[key];
+                                return (
+                                    <Fragment key={index}>
+                                        <div style={styles.type}>
+                                            <div
+                                                style={styles.content}
+                                                onClick={() => onclick(key, () => Notify(`Đã copy ${key} icon`))}
+                                            >
+                                                <Comp {...args} />
+                                            </div>
+                                            <Typography type={'h3'} style={styles.title}>
+                                                {key}
+                                            </Typography>
+                                        </div>
+                                    </Fragment>
+                                );
+                            }
+                            return null;
+                        })}
+                </div>
+                <AlertNotify
+                    getAddNotify={func => (Notify = func)}
+                    progressing={true}
+                    autoDisappear={true}
+                    maxWidth={'500px'}
+                    position={{ vertical: 'top', horizontal: 'right' }}
+                />
+            </div>
+        </>
+    );
+};
+
+// const Template2 = args => {
+//     let Notify = null;
+
+//     return (
+//         <div style={styles.frames}>
+//             <h1>Icon General</h1>
+//             <div style={styles.container}>
+//                 {Object.keys(GeneralIcons).map((key, index) => {
+//                     const Comp = GeneralIcons[key];
+//                     return (
+//                         <div style={styles.icon} key={index}>
+//                             <div
+//                                 style={styles.content}
+//                                 onClick={() => onclick(key, () => Notify(`Đã copy ${key} icon`))}
+//                             >
+//                                 <Comp {...args} />
+//                             </div>
+//                             <p style={styles.title}>{key}</p>
+//                         </div>
+//                     );
+//                 })}
+//             </div>
+//             <AlertNotify
+//                 getAddNotify={func => (Notify = func)}
+//                 progressing={true}
+//                 autoDisappear={true}
+//                 maxWidth={'500px'}
+//                 position={{ vertical: 'top', horizontal: 'right' }}
+//             />
+//         </div>
+//     );
+// };
+
+export const Basic = Template.bind({});
+Basic.parameters = { controls: { include: ['color', 'height', 'width', 'viewBox'] } };
+
+// export const General = Template2.bind({});
+// General.parameters = { controls: { include: ['pathFill', 'height', 'width'] } };
+// General.args = {
+//     pathFill: '#7F828E',
+// };

package/src/icons/effect.js

@@ -0,0 +1,167 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import {
+    border,
+    borderDashed,
+    boxBorder,
+    displayFlex,
+    flexRow,
+    itemsCenter,
+    justifyCenter,
+    outlineNone,
+    parseMinWidthHeight,
+    parseWidthHeight,
+    userSelectNone,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { capitalize, classNames, getProp } from 'utils';
+import * as Icons from './basic';
+
+const iconColorMap = new Map([
+    ['Image', 'dynamic/pumpkin'],
+    ['Compressed', 'dynamic/violet'],
+    ['Presentation', 'dynamic/pumpkin'],
+    ['Sheet', 'semantic/success'],
+    ['Word', 'semantic/info'],
+    ['Pdf', 'semantic/danger'],
+]);
+
+const Icon = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Icon' });
+        const {
+            action = {},
+            className,
+            color: colorProp,
+            height,
+            id,
+            name,
+            onClick,
+            style,
+            viewBox,
+            width,
+            ...other
+        } = props;
+
+        const color = colorProp === 'default' ? 'system/rest' : colorProp;
+
+        const ref = useRef(null);
+
+        const _IconCSS = IconCSS(width, height);
+        const _NotFoundIconCSS = NotFoundIconCSS(width, theme);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        if (!name) return null;
+
+        const IconComponent = Icons[capitalize(name)];
+
+        const iconElement = IconComponent ? (
+            <IconComponent
+                width={width}
+                height={height}
+                color={iconColorMap.get(capitalize(name)) || color}
+                viewBox={viewBox}
+            />
+        ) : (
+            <span css={_NotFoundIconCSS} />
+        );
+
+        return (
+            <span
+                css={_IconCSS}
+                ref={ref}
+                id={id}
+                className={classNames('DGN-UI-Icon', className)}
+                style={style}
+                onClick={onClick}
+                {...other}
+            >
+                {iconElement}
+            </span>
+        );
+    })
+);
+
+const IconCSS = (width = 24, height = 24) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${justifyCenter};
+    ${itemsCenter};
+    ${boxBorder};
+    ${outlineNone};
+    ${userSelectNone};
+    ${parseWidthHeight('max-content')};
+    ${parseMinWidthHeight(width, height)};
+`;
+
+const NotFoundIconCSS = (width = 24, { colors }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${boxBorder};
+    ${parseWidthHeight(width)};
+    ${border(1, getProp(colors, 'system/rest'))};
+    ${borderDashed};
+`;
+
+// Icon.defaultProps = {
+//     className: '',
+//     color: 'system/rest',
+//     height: 24,
+//     style: {},
+//     viewBox: true,
+//     width: 24,
+// };
+
+Icon.propTypes = {
+    /** CSS class for the component. */
+    className: PropTypes.string,
+    /** The color of the component. */
+    color: PropTypes.string,
+    /** The height of the component. */
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** The name of the icon from the [Basic Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic) set. */
+    name: PropTypes.string.isRequired,
+    /** Inline style for the component. */
+    style: PropTypes.object,
+    /** If `true`, the component has a view box. */
+    viewBox: PropTypes.bool,
+    /** The width of the component. */
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /**
+     * ref methods (ref.current.instance.*method*)
+     *
+     * * option(): Gets all UI component properties
+     *  * Returns value - object
+     * * option(optionName): Gets the value of a single property
+     *  * @param {optionName} - string
+     *  * Returns value - any
+     * * option(optionName, optionValue): Updates the value of a single property
+     *  * @param {optionName} - string
+     *  * @param {optionValue} - any
+     * * option(options): Updates the values of several properties
+     *  * @param {options} - object
+     */
+};
+
+export { Icon };
+export default OptionWrapper(Icon);

package/src/icons/general/clock/clock.js

@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Clock = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 20 20" fill="none">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M13.4167 8.625H10.5417V5.75C10.5417 5.22004 10.1123 4.79167 9.58333 4.79167C9.05433 4.79167 8.625 5.22004 8.625 5.75V9.58333C8.625 10.1133 9.05433 10.5417 9.58333 10.5417H13.4167C13.9466 10.5417 14.375 10.1133 14.375 9.58333C14.375 9.05338 13.9466 8.625 13.4167 8.625ZM9.58333 17.25C5.35612 17.25 1.91667 13.8105 1.91667 9.58333C1.91667 5.35612 5.35612 1.91667 9.58333 1.91667C13.8105 1.91667 17.25 5.35612 17.25 9.58333C17.25 13.8105 13.8105 17.25 9.58333 17.25ZM9.58333 0C4.29908 0 0 4.29908 0 9.58333C0 14.8676 4.29908 19.1667 9.58333 19.1667C14.8676 19.1667 19.1667 14.8676 19.1667 9.58333C19.1667 4.29908 14.8676 0 9.58333 0Z"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default Clock;

package/src/icons/general/color-handler/background.js

@@ -0,0 +1,34 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const BackgroundColor = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 34.522 20">
+            <g id="Group_12" data-name="Group 12" transform="translate(-1083 -1243)">
+                <g id="Group_5" data-name="Group 5" transform="translate(733 1233)" clipPath="url(#clip-path)">
+                    <path
+                        id="Path_14"
+                        data-name="Path 14"
+                        d="M380,22.434a.7.7,0,0,1-.255-.047.661.661,0,0,1-.215-.136l-3.857-3.621a.6.6,0,0,1,0-.883.7.7,0,0,1,.94,0L380,20.927l3.387-3.179a.664.664,0,0,1,.215-.135.707.707,0,0,1,.51,0,.666.666,0,0,1,.215.135.63.63,0,0,1,.145.2.6.6,0,0,1,.05.239.582.582,0,0,1-.051.239.612.612,0,0,1-.144.2l-3.857,3.621a.661.661,0,0,1-.215.136.7.7,0,0,1-.255.047Z"
+                        fill={pathFill}
+                    />
+                </g>
+                <path
+                    id="Path_18"
+                    data-name="Path 18"
+                    d="M367.152,10a1.641,1.641,0,0,0-1.18.49l-6.9,6.9-.01.01a.01.01,0,0,1-.01.01l-2.079,2.079a2.515,2.515,0,0,0,0,3.538,2.509,2.509,0,0,0,3.538,0l2.079-2.079h.01l.01-.01,6.9-6.906a1.672,1.672,0,0,0,0-2.359l-1.18-1.179A1.655,1.655,0,0,0,367.152,10Zm-7.816,11.834a.834.834,0,1,1-1.18-1.179l1.49-1.489,1.179,1.179ZM362,19.165l-1.179-1.179,6.317-6.317,1.179,1.179Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_19"
+                    data-name="Path 19"
+                    d="M368.321,25.412H351.669A1.672,1.672,0,0,0,350,27.081v1.249A1.672,1.672,0,0,0,351.669,30h16.662A1.672,1.672,0,0,0,370,28.331V27.081A1.681,1.681,0,0,0,368.321,25.412Zm0,2.909H351.669V27.071h16.662v1.249Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+            </g>
+        </svg>
+    );
+};
+export default BackgroundColor;

package/src/icons/general/color-handler/text.js

@@ -0,0 +1,34 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const TextColor = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 34.522 20">
+            <g id="Group_11" data-name="Group 11" transform="translate(-1035 -1243)">
+                <path
+                    id="Path_11"
+                    data-name="Path 11"
+                    d="M320.34,25.41H303.67A1.673,1.673,0,0,0,302,27.08v1.25A1.673,1.673,0,0,0,303.67,30h16.67a1.673,1.673,0,0,0,1.67-1.67V27.08A1.667,1.667,0,0,0,320.34,25.41Zm0,2.91H303.67V27.07h16.67Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_12"
+                    data-name="Path 12"
+                    d="M317.84,14.16a.828.828,0,0,0,.83-.83v-2.5a.828.828,0,0,0-.83-.83H306.17a.828.828,0,0,0-.83.83v2.5a.83.83,0,0,0,1.66,0V11.66h2.5v10h-1.25a.83.83,0,0,0,0,1.66h7.5a.83.83,0,0,0,0-1.66H314.5v-10H317v1.67A.85.85,0,0,0,317.84,14.16Zm-5,7.5h-1.67v-10h1.67Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <g id="Group_4" data-name="Group 4" transform="translate(733 1233)" clipPath="url(#clip-path)">
+                    <path
+                        id="Path_13"
+                        data-name="Path 13"
+                        d="M332,22.434a.7.7,0,0,1-.255-.047.661.661,0,0,1-.215-.136l-3.857-3.621a.6.6,0,0,1,0-.883.7.7,0,0,1,.94,0L332,20.927l3.387-3.179a.664.664,0,0,1,.215-.135.707.707,0,0,1,.51,0,.666.666,0,0,1,.215.135.63.63,0,0,1,.145.2.6.6,0,0,1,.05.239.582.582,0,0,1-.051.239.612.612,0,0,1-.144.2l-3.857,3.621a.661.661,0,0,1-.215.136.7.7,0,0,1-.255.047Z"
+                        fill={pathFill}
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};
+export default TextColor;

package/src/icons/general/emoji/emoji.js

@@ -0,0 +1,27 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Emoji = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 34.522 20">
+            <g id="Group_13" data-name="Group 13" transform="translate(-1131 -1243)">
+                <g id="Group_6" data-name="Group 6" transform="translate(733 1233)" clipPath="url(#clip-path)">
+                    <path
+                        id="Path_15"
+                        data-name="Path 15"
+                        d="M428,22.434a.7.7,0,0,1-.255-.047.661.661,0,0,1-.215-.136l-3.857-3.621a.6.6,0,0,1,0-.883.7.7,0,0,1,.94,0L428,20.927l3.387-3.179a.664.664,0,0,1,.215-.135.707.707,0,0,1,.51,0,.666.666,0,0,1,.215.135.63.63,0,0,1,.145.2.6.6,0,0,1,.05.239.582.582,0,0,1-.051.239.612.612,0,0,1-.144.2l-3.857,3.621a.661.661,0,0,1-.215.136.7.7,0,0,1-.255.047Z"
+                        fill={pathFill}
+                    />
+                </g>
+                <path
+                    id="Path_51"
+                    data-name="Path 51"
+                    d="M415.07,27.069a10,10,0,1,0-14.147,0A10.02,10.02,0,0,0,415.07,27.069ZM402.005,14.015a8.459,8.459,0,1,1,0,11.963A8.471,8.471,0,0,1,402.005,14.015Zm.03,3.316v-.08a1.555,1.555,0,0,1,1.433-1.653h2.444a1.46,1.46,0,0,1,1.363,1.152h1.593A1.46,1.46,0,0,1,410.23,15.6h2.445a1.555,1.555,0,0,1,1.433,1.653v.08a1.555,1.555,0,0,1-1.433,1.653H410.23a1.55,1.55,0,0,1-1.432-1.613h-1.463a1.55,1.55,0,0,1-1.433,1.613h-2.444A1.554,1.554,0,0,1,402.035,17.331Zm10.289,4.749a4.785,4.785,0,0,1-8.676-.02.568.568,0,0,1,.311-.741.538.538,0,0,1,.22-.04.563.563,0,0,1,.521.351,3.656,3.656,0,0,0,6.592,0,.563.563,0,1,1,1.032.451Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+            </g>
+        </svg>
+    );
+};
+export default Emoji;

package/src/icons/general/font-properties/bold.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Bold = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 13.89 20">
+            <path
+                id="Path_7"
+                data-name="Path 7"
+                d="M211.87,19.51a5.551,5.551,0,0,0-3.9-9.51h-5.86A1.114,1.114,0,0,0,201,11.11V28.89A1.114,1.114,0,0,0,202.11,30h7.22a5.55,5.55,0,0,0,2.54-10.49Zm-8.64-7.29h4.75a3.33,3.33,0,1,1,0,6.66h-4.75Zm6.11,15.56h-6.11V21.11h6.11a3.335,3.335,0,0,1,0,6.67Z"
+                transform="translate(-201 -10)"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default Bold;

package/src/icons/general/font-properties/font-family.js

@@ -0,0 +1,27 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const FontFamily = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 32.522 20">
+            <g id="Group_9" data-name="Group 9" transform="translate(-829 -1243)">
+                <g id="Group_2" data-name="Group 2" transform="translate(733 1233)" clipPath="url(#clip-path)">
+                    <path
+                        id="Path_1"
+                        data-name="Path 1"
+                        d="M124,22.434a.7.7,0,0,1-.255-.047.661.661,0,0,1-.215-.136l-3.857-3.621a.6.6,0,0,1,0-.883.7.7,0,0,1,.94,0L124,20.927l3.387-3.179a.664.664,0,0,1,.215-.135.707.707,0,0,1,.51,0,.665.665,0,0,1,.215.135.631.631,0,0,1,.145.2.6.6,0,0,1,.05.239.582.582,0,0,1-.051.239.612.612,0,0,1-.144.2l-3.857,3.621a.661.661,0,0,1-.215.136.7.7,0,0,1-.255.047Z"
+                        fill={pathFill}
+                    />
+                </g>
+                <path
+                    id="Path_2"
+                    data-name="Path 2"
+                    d="M110.55,14.55a.913.913,0,0,0,.91-.91V10.91a.913.913,0,0,0-.91-.91H96.91a.913.913,0,0,0-.91.91v2.73a.91.91,0,1,0,1.82,0V11.82H101V28.18H99.18A.91.91,0,1,0,99.19,30h9.09a.91.91,0,1,0,0-1.82h-1.82V11.82h3.18v1.82A.913.913,0,0,0,110.55,14.55Zm-5.91,13.63h-1.82V11.82h1.82Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+            </g>
+        </svg>
+    );
+};
+export default FontFamily;

package/src/icons/general/font-properties/font-size.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const FontSize = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 35.522 20.001" fill="none">
+            <g clipPath="url(#clip0)">
+                <path
+                    d="M32 14.4345C31.9126 14.4348 31.826 14.4187 31.7453 14.3873C31.6645 14.356 31.5912 14.3099 31.5295 14.2517L27.6727 10.631C27.5479 10.5139 27.4778 10.3551 27.4778 10.1895C27.4778 10.0238 27.5478 9.865 27.6726 9.74788C27.7973 9.63076 27.9665 9.56495 28.143 9.56494C28.3194 9.56493 28.4886 9.63071 28.6134 9.74782L32 12.927L35.3866 9.74782C35.4483 9.68983 35.5217 9.64384 35.6024 9.61246C35.6831 9.58108 35.7696 9.56494 35.857 9.56494C35.9443 9.56495 36.0308 9.58111 36.1115 9.6125C36.1922 9.64388 36.2656 9.68989 36.3273 9.74788C36.3891 9.80587 36.4381 9.87472 36.4715 9.95049C36.5049 10.0263 36.5221 10.1075 36.5221 10.1895C36.5221 10.2715 36.5049 10.3527 36.4715 10.4284C36.438 10.5042 36.389 10.5731 36.3273 10.631L32.4704 14.2517C32.4087 14.3099 32.3354 14.356 32.2547 14.3873C32.1739 14.4187 32.0874 14.4348 32 14.4345Z"
+                    fill={pathFill}
+                />
+            </g>
+            <path
+                d="M22.1273 9.01758H12.0433C11.521 9.01758 11.0938 9.44487 11.0938 9.96711V12.4264C11.0938 12.9486 11.521 13.3759 12.0433 13.3759C12.5655 13.3759 12.9928 12.9486 12.9928 12.4264V10.9071H16.1452V20.1016H14.683C14.1607 20.1016 13.7334 20.5288 13.7334 21.0511C13.7334 21.5733 14.1607 22.0006 14.683 22.0006H19.4971C20.0193 22.0006 20.4466 21.5733 20.4466 21.0511C20.4466 20.5288 20.0193 20.1016 19.4971 20.1016H18.0348V10.9071H21.1872V12.4169C21.1872 12.9391 21.6145 13.3664 22.1367 13.3664C22.659 13.3664 23.0863 12.9391 23.0863 12.4169V9.95761C23.0768 9.43537 22.6495 9.01758 22.1273 9.01758Z"
+                fill={pathFill}
+            />
+            <path
+                d="M12.0335 2H1.94953C1.42729 2 1 2.42729 1 2.94953V5.4088C1 5.93104 1.42729 6.35833 1.94953 6.35833C2.47177 6.35833 2.89905 5.93104 2.89905 5.4088V3.88956H6.05148V20.101H4.58921C4.06697 20.101 3.63968 20.5283 3.63968 21.0505C3.63968 21.5727 4.06697 22 4.58921 22H9.40331C9.92555 22 10.3528 21.5727 10.3528 21.0505C10.3528 20.5283 9.92555 20.101 9.40331 20.101H7.94104V3.88956H11.0935V5.39931C11.0935 5.92155 11.5208 6.34883 12.043 6.34883C12.5652 6.34883 12.9925 5.92155 12.9925 5.39931V2.94953C12.983 2.42729 12.5557 2 12.0335 2Z"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default FontSize;

package/src/icons/general/font-properties/italic.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Italic = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 5.296 20">
+            <path
+                id="Path_8"
+                data-name="Path 8"
+                d="M241.46,15.04a1.26,1.26,0,0,1,.243,1.016l-2.16,11.159a1.177,1.177,0,0,1,.964,2.139l-.741.413a1.819,1.819,0,0,1-1.991-.138,1.915,1.915,0,0,1-.741-1.906l2.086-10.8h-.5a1.175,1.175,0,0,1,0-2.35h1.927A1.244,1.244,0,0,1,241.46,15.04ZM240.92,10a1.4,1.4,0,1,0,1.376,1.4A1.385,1.385,0,0,0,240.92,10Z"
+                transform="translate(-237 -10)"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default Italic;

package/src/icons/general/font-properties/underline.js

@@ -0,0 +1,26 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Underline = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 12.661 19.999">
+            <g id="Group_18" data-name="Group 18" transform="translate(-999 -1243)">
+                <path
+                    id="Path_9"
+                    data-name="Path 9"
+                    d="M277.663,10a.994.994,0,0,0-1,1v8.669a4.335,4.335,0,0,1-8.669,0V11a1,1,0,0,0-2,0v8.669A6.333,6.333,0,0,0,272.331,26a6.334,6.334,0,0,0,6.33-6.331V11A1,1,0,0,0,277.663,10Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_10"
+                    data-name="Path 10"
+                    d="M277.663,28H267a1,1,0,0,0,0,2h10.665a.994.994,0,0,0,1-1A1.006,1.006,0,0,0,277.663,28Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+            </g>
+        </svg>
+    );
+};
+export default Underline;

package/src/icons/general/hyperlink/hyperlink.js

@@ -0,0 +1,33 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Hyperlink = ({ width = '1em', height = '1em', pathFill = 'currentColor', viewBox = '0 0 20 20' }) => {
+    return (
+        <svg width={width} height={height} viewBox={viewBox}>
+            <g id="Group_16" data-name="Group 16" transform="translate(-164.198 53.245)">
+                <path
+                    id="Path_41"
+                    data-name="Path 41"
+                    d="M166.983-37.1a3.736,3.736,0,0,1,.563-4.688l2.433-2.433a1.115,1.115,0,0,0,0-1.578h0a1.115,1.115,0,0,0-1.578,0l-2.353,2.353a6.045,6.045,0,0,0-.571,8.056,5.876,5.876,0,0,0,8.7.43l2.533-2.533a1.115,1.115,0,0,0,0-1.578h0a1.115,1.115,0,0,0-1.578,0L172.6-36.542A3.647,3.647,0,0,1,166.983-37.1Z"
+                    fill={pathFill}
+                />
+                <rect
+                    id="Rectangle_7"
+                    data-name="Rectangle 7"
+                    width="9.397"
+                    height="2.349"
+                    rx="1.175"
+                    transform="translate(170.02 -40.778) rotate(-45)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_42"
+                    data-name="Path 42"
+                    d="M173.993-51.4l-2.353,2.353a1.115,1.115,0,0,0,0,1.578h0a1.115,1.115,0,0,0,1.578,0l2.433-2.433a3.737,3.737,0,0,1,4.688-.563,3.647,3.647,0,0,1,.562,5.612l-2.533,2.533a1.115,1.115,0,0,0,0,1.578h0a1.115,1.115,0,0,0,1.578,0l2.533-2.533a5.876,5.876,0,0,0-.43-8.7A6.045,6.045,0,0,0,173.993-51.4Z"
+                    fill={pathFill}
+                />
+            </g>
+        </svg>
+    );
+};
+export default Hyperlink;

package/src/icons/general/indent/decrease.js

@@ -0,0 +1,54 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Decrease = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 23.437 20">
+            <g id="Group_17" data-name="Group 17" transform="translate(-986 -1283)">
+                <path
+                    id="Path_38"
+                    data-name="Path 38"
+                    d="M275.326,67.777H254.114a1.111,1.111,0,0,0,0,2.222h21.212a1.111,1.111,0,0,0,0-2.222Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_39"
+                    data-name="Path 39"
+                    d="M275.326,63.334H265.215a1.111,1.111,0,0,0,0,2.222h10.111a1.111,1.111,0,0,0,0-2.222Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_40"
+                    data-name="Path 40"
+                    d="M275.326,58.891H265.215a1.111,1.111,0,0,0,0,2.222h10.111a1.111,1.111,0,0,0,0-2.222Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_41"
+                    data-name="Path 41"
+                    d="M254.114,52.222h21.212a1.111,1.111,0,0,0,0-2.222H254.114a1.111,1.111,0,0,0,0,2.222Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_42"
+                    data-name="Path 42"
+                    d="M275.326,54.443H265.215a1.111,1.111,0,0,0,0,2.222h10.111a1.111,1.111,0,0,0,0-2.222Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_43"
+                    data-name="Path 43"
+                    d="M257.767,54.774l-4.444,4.444a1.117,1.117,0,0,0,0,1.572l4.444,4.444a1.126,1.126,0,0,0,.781.33,1.2,1.2,0,0,0,.42-.08,1.116,1.116,0,0,0,.681-1.031v-8.9a1.127,1.127,0,0,0-.681-1.031A1.1,1.1,0,0,0,257.767,54.774Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+            </g>
+        </svg>
+    );
+};
+export default Decrease;