Customization

The icons library provides various ways to customize its components to fit your project's design and functionality requirements:

Theming

Customize the appearance and behavior of icons components using a theming system from @modjs/utils.

Light Theme

lightTheme.js
Execute Code
Copy to clipbaord
import { ModLightTheme } from '@modjs/utils'

    mode: '#ffffff',

    typography: {
        ff: {
            primary: 'KoHo',
        },
        fw: {
            medium: 400,
            semibold: 600,
            bold: 700,
        },
        fs: {
            xsm: '0.75rem',
            sm: '0.875rem',
            md: '1rem',
            lg: '1.5rem',
            xl: '2rem',
        },
        color: {
            primary: '#474747',
            main: '#474747',
            light: '#8e8e8e',
            secondary: '#c2c2c2',
            white: '#ffffff',
            success: '#5a6b31',
            error: '#ca3c1f',
        },
    },
    color: {
        primary: '#1f8eff',
        secondary: '#474747',
        main: '#c2c2c2',
        success: '#5a6b31',
        error: '#ca3c1f',
        light: '#f2f2f2',
        dark: '#c2c2c2',
        transparent: 'transparent',
    },
    border: {
        primary: '1px solid #1f8eff',
        success: '1px solid #5a6b31',
        error: '1px solid #ca3c1f',
        light: '1px solid #f2f2f2',
        dark: '1px solid #c2c2c2',
        none: 'none',
    },
    borderRadius: '2px',
    avatar: {
        height: {
            sm: '32px',
            md: '64px',
            lg: '96px',
        },
        width: {
            sm: '32px',
            md: '64px',
            lg: '96px',
        },
        brightness: {
            light: 'brightness(60%)',
            normal: 'brightness(40%)',
            dark: 'brightness(20%)',
        },
    },
    image: {
        height: {
            sm: '96px',
            md: '240px',
            lg: '320px',
        },
        width: {
            sm: '96px',
            md: '240px',
            lg: '320px',
        },
        brightness: {
            light: 'brightness(60%)',
            normal: 'brightness(40%)',
            dark: 'brightness(20%)',
        },
    },
    icons: {
        height: {
            sm: '16px',
            md: '32px',
            lg: '64px',
        },
        width: {
            sm: '24px',
            md: '32px',
            lg: '64px',
        },
    },
    elevation: {
        light: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.1))',
        normal: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.3))',
        heavy: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6))',
        none: 'none',
    },
    opacity: {
        high: 0.95,
        medium: 0.85,
        low: 0.5,
    },
    scrollbarColor: '#c2c2c2 #f2f2f2',
    tooltipBg: '#474747',
}
export default lightTheme

Dark Theme

darkTheme.js
Execute Code
Copy to clipbaord
import { ModDarkTheme } from '@modjs/utils'

    ...ModDarkTheme.mode,
    mode: '#121111',
    typography: {
        ...ModDarkTheme.typography,
        ff: {
            primary: 'KoHo',
        },
        fw: {
            medium: 400,
            semibold: 600,
            bold: 700,
        },
        fs: {
            xsm: '0.75rem',
            sm: '0.875rem',
            md: '1rem',
            lg: '1.5rem',
            xl: '2rem',
        },
        color: {
            primary: '#ffffff',
            main: '#c2c2c2',
            light: '#8e8e8e',
            secondary: '#474747',
            white: '#ffffff',
            success: '#5a6b31',
            error: '#ca3c1f',
        },
    },
    color: {
        primary: '#1f8eff',
        secondary: '#ffffff',
        main: '#c2c2c2',
        success: '#5a6b31',
        error: '#ca3c1f',
        light: '#1f1d1d',
        dark: '#474747',
        transparent: 'transparent',
    },
    border: {
        primary: '1px solid #1f8eff',
        success: '1px solid #5a6b31',
        error: '1px solid #ca3c1f',
        light: '1px solid #1f1d1d',
        dark: '1px solid #474747',
        none: 'none',
    },
    borderRadius: '2px',
    avatar: {
        height: {
            sm: '32px',
            md: '64px',
            lg: '96px',
        },
        width: {
            sm: '32px',
            md: '64px',
            lg: '96px',
        },
        brightness: {
            light: 'brightness(60%)',
            normal: 'brightness(40%)',
            dark: 'brightness(20%)',
        },
    },
    image: {
        height: {
            sm: '96px',
            md: '240px',
            lg: '320px',
        },
        width: {
            sm: '96px',
            md: '240px',
            lg: '320px',
        },
        brightness: {
            light: 'brightness(60%)',
            normal: 'brightness(40%)',
            dark: 'brightness(20%)',
        },
    },
    icons: {
        height: {
            sm: '1rem',
            md: '2rem',
            lg: '4rem',
        },
        width: {
            sm: '1.5rem',
            md: '2rem',
            lg: '4rem',
        },
    },
    elevation: {
        light: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.1))',
        normal: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.3))',
        heavy: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6))',
        none: 'none',
    },
    opacity: {
        high: 0.95,
        medium: 0.85,
        low: 0.5,
    },
    scrollbarColor: '#474747 #1f1d1d',
    tooltipBg: '#8e8e8e',
}
export default darkTheme

Override Styles

To override default styles of the components, you have several options. Note that the following options are listed in accending order based on the precedence. For example: the default styles have lowest precedence followed by the styles from System Props while the inline styles have the highest precedence.

System Props

Each component under @modjs/icons is wrapped with awithModSystemProps HOC. All props provided by withModSystemProps can be applied to the component to override default styles.

App.jsx
Execute Code
Copy to clipbaord
import { AccountIcon } from '@modjs/icons' 
                                        
export const App = () => {
    <AccountIcon
        m={32}
        p={32}
    />
}

Styled Components

All icons components from @modjs/icons are styled using thestyled-components library. The default styles can be overridden using styled-components.

App.jsx
Execute Code
Copy to clipbaord
import { MailIcon } from '@modjs/icons' 
import {styled} from 'styled-components'

const StyledMailIcon = styled(MailIcon)`
    margin: 32px;
    padding: 32px;
`
export const App = () => {
    <StyledMailIcon />
}

Custom classNames

Each icons components are designed to accept all valid HTML attributes. Therefore, the icons components can be styled using the class attribute.

App.jsx
Execute Code
Copy to clipbaord
import { ReactIcon } from '@modjs/icons' 

export const App = () => {
    <ReactIcon className = "icon-class" />
}

Inline Styles

Since all icons components accept valid HTML attributes, the component can also be styled using the style HTML attribute.

App.jsx
Execute Code
Copy to clipbaord
import { JavaScriptIcon } from '@modjs/core' 

export const App = () => {
    <JavaScriptIcon style = {{padding: "8px" margin: "8px"}} />
}

Installation Icons API

What are you looking for?

Common Searches:

Settings