반응 아이콘에 대해 알아야 할 모든 것.

반응 아이콘이란 무엇입니까?

설치

npm install react-icons --save

yarn add react-icons

특정 아이콘을 가져오는 방법

import { x } from 'react-icons/first-two-letters-of-x';

예시

import { ExAmple } from 'react-icons/ex';

실제 사례

// importing from font awesome icons
import { FaHtml5 } from 'react-icons/fa';

// importing from bootstrap icons
import { BsFillReplyFill } from 'react-icons/bs';

//  importing from material design icons
import { MdDoneAll } from 'react-icons/md';

// importing from box icons
import { BiCalendar } from 'react-icons/bi';

용법

import {FaCss3Alt} from 'react-icons/fa';
const Component = () => {
    return (
        <FaCss3Alt  />
    ):
};

아이콘 컨텍스트(구성)

import { IconContext } from "react-icons";
import {FaCss3Alt} from 'react-icons/fa';
const Component = () => {
    return (
        <IconContext.Provider value={{
            size:'1.5em',
            className:'css-icon',
            style:{margin:'.5em 1emp',},
            color:'blue'
        }}
        >
            <FaCss3Alt  />
        </IconContext.Provider>
    ):
};

추천 게시물