Skip to main content

Using Icon Symbols in ReactJS

How to use Icon Symbols in a project with type-safe Enum, first download Typescript format

Icon symbols download format

1. configuration​

1.1. Then install the component Lib in your project​

yarn add @acrool/react-iconsvg

1.2. Create a placement data structure​

.
├── src
│   ├── lib/bear-react-icon
│   │   ├── Icon.tsx
│   │   ├── SvgSymbols.tsx
│   │   └── index.ts

1.3. SvgSymbols.tsx​

Please download the Typescript format in Acrool

1.4. Icon.tsx​

import IconSvg, {IIconSvgProps} from '@acrool/react-iconsvg';
import React from 'react';
import styled from 'styled-components';

import {TIconCode} from './SvgSymbol';


const idPrefix = 'icon_';

interface IProps extends IIconSvgProps {
    code: TIconCode
}

const Icon = (props: IProps) => {
    return <ThemeIconSvg
        {...props}
        idPrefix={idPrefix}
        symbolsPath=""
    />;
};

export default Icon;

const ThemeIconSvg = styled(IconSvg)`
  --primary-color: ${props => props.theme.primaryColor};
  --secondary-color: var(--primary-color2);
`;

1.5. index.ts​

export {default} from './Icon';
export {default as SvgSymbol} from './SvgSymbol';
export * from './SvgSymbol';

1.6. Add SvgSymbol to Layout​

import {SvgSymbol} from '@/lib/bear-react-icon';

const App = () => {
    return (<>
        <MainRouter/>
        {SvgSymbol} {/* <~ add this */}
    </>)
}

2. How to use?​

import Icon from '@/lib/bear-react-icon';
import {EIconCode} from "./SvgSymbol";

const Example = () => {
    return (
        <Icon code={EIconCode.more} color="#dc3545" size={22}/>
    )
}