在ReactJS使用 Icon Symbols

如何在專案中使用 Icon Symbols，並具備安全型別的Enum，首先下載Typescript格式

1. 配置

1.1. 接著在你的專案中安裝元件Lib

yarn add @acrool/react-iconsvg

1.2. 建立放置資料結構

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

1.3. SvgSymbols.tsx

請在 Acrool 中下載 Typescript 格式

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. 在 Layout 中加入 SvgSymbol

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

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

2. 如何使用?

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

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