yarn add antd
// icon을 사용할 경우 설치한다.
yarn add @ant-design/icons
[Ant Design] 접속
Header의 Components 탭 선택
원하는 컴포넌트의 Show code 아이콘 </>
누르면 코드가 나온다.
import {Button} from 'antd';
import 'antd/dist/antd.css';
CSS를 import한다.
antd를 사용하는 곳이 많다면, CSS를 app.tsx
에서 한번에 import 해도 된다.
icon에 지정한 id는 사용이 불가하다!
(antdesign에서 아예 새로운 태그가 생겨서 오기 때문)
import { PlayCircleOutlined } from "@ant-design/icons";
import styled from "@emotion/styled";
const MyIcon = styled(PlayCircleOutlined)`
font-size: 50px;
color: red;
`;
export default function LibraryIconPage() {
return (
<MyIcon />
);
}
⭐️ 아이콘 사이즈 조절: width/height가 아닌 fontSize로 지정⭐️
// 태그 안에 바로 작성 시
<S.LikeIcon style={{ color: "#FFD600", fontSize: "18px" }} />
브라우저에 실행된 모습 -> javascript/css/html로 변환되어서 브라우저에서 실행된다.
컴포넌트에 아이디를 부여하면 아이콘을 감싼 span에 id가 부여되어서 사용할 수 없다.
아이콘을 감싸는 태그를 만들어서 감싼 태그에 id를 넣고, 그 태그에 함수를 바인딩해야 한다.
onchange={(qqq)=> setValue(qqq)}
// 들어간 게 그대로 들어가면 생략할 수 있다?!
onChange={setValue}
Material-UI : [Material-UI 사이트]
Carousel : [React Slick 사이트]
차트 : [Recharts 사이트]
유튜브 : [react-player 사용 방법]