홈페이지 입니다.
https://github.com/ismamz/react-bootstrap-icons
GitHub - ismamz/react-bootstrap-icons: React component for Bootstrap Icons
React component for Bootstrap Icons. Contribute to ismamz/react-bootstrap-icons development by creating an account on GitHub.
github.com
설치입니다.
npm install react-bootstrap-icons |
포함입니다.
import { 아이콘 이름들.... } from 'react-bootstrap-icons'; import * as Icon from 'react-bootstrap-icons'; |
1. create-react-app를 이용하여 app008 프로젝트를 만듭니다.
| 1) 프로젝트 작성 D:\React> npx create-react-app app008 2) 폴더이동 D:\React> cd app008 3) bootstrap 설치 D:\React\app008> npm install react-bootstrap-icon 4) visual code 실행 D:\React\app008> code . 5) public 폴더와 src폴더의 모든 파일을 삭제합니다. |
2. public 폴더에 다음과 같이 index.html파일을 생성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Component</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
3. src폴더에 UseBootstrapIcon.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import { ArrowRight, AirplaneEnginesFill } from 'react-bootstrap-icons';
import * as Icon from 'react-bootstrap-icons';
const UseBootstrapIcon = (props) => {
return (
<>
{/* 부트스트랩 아이콘 사용하기 */}
<AirplaneEnginesFill color="royalblue" size={33} />
<ArrowRight color="royalblue" size={33} />
<Icon.AlarmFill color="royalblue" size={33} />
<Icon.Apple color="red" size={33} onClick={() => alert('사과입니다.')} style={{ cursor: 'pointer' }} />
</>
);
}
export default UseBootstrapIcon;
|
cs |
4. src폴더에 App.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
|
import UseBootstrapIcon from "./UseBootstrapIcon";
function App(){
return (
<>
<UseBootstrapIcon/>
</>
);
}
export default App;
|
cs |
5. src폴더에 index.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
|
cs |
6. visual code에서 [새 터미널] 창을 열고 "npm start"명령으로 애플리케이션을 시작합니다.
실행 화면 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 24] dayjs 사용하기 (1) | 2024.10.21 |
|---|---|
| [React Exam 23] 이미지 홀더 사용하기 (0) | 2024.10.21 |
| [React Exam 21] bootstrap 사용하기 (0) | 2024.10.21 |
| [React Exam 20] jQuery 사용하기 (1) | 2024.10.21 |
| [React Exam 19] 스타일 추가하기 (0) | 2024.10.21 |
