프로젝트를 진행하다보면
icons 들을 사용할 일이 많은데
font awesome 은 유료버전이 너므 많아서
다시 구글 아이콘으로 회기했습니다🙄
https://fonts.google.com/icons
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
google font 나 google icons 들은 html 기준이여서
React 에서 사용하려면 다른 방법을 사용해야 됩니당
1. 페이지마다 import 시켜서 사용하기
2. html 에 박아놓기
페이지마다 import 해서 사용하는 방법은
재랜더링이 잦은 리액트한테 제일 좋은 방법이긴 한데...
사용할 때 마다 import 하기 귀찮기도 합니다.
그래서 어차피 전 페이지에서 사용할거
html 에 박아놓았습니당...
1. 페이지마다 import 시켜서 사용하기
https://www.npmjs.com/package/react-google-material-icons
react-google-material-icons
react-google-material-icons React component. Latest version: 1.0.4, last published: 5 years ago. Start using react-google-material-icons in your project by running `npm i react-google-material-icons`. There are 4 other projects in the npm registry using re
www.npmjs.com
2. html 에 박아놓기
구글폰트 사이트에서 사용하고 싶은 아이콘을 눌러줍니다.
Static icon font 쪽의 첫번째 코드를 복사해줍니다.
작업하고 있는 React 프로젝트의
public > index.html 로 들어가줍니다.
<head></head> 태그 쪽에 방금 복사한 코드를 붙여넣어줍니다.
이제 사용하고 싶은 아이콘의
<span></span> 태그의 코드를 복사해서 사용해주면 됩니다.
이렇게 사용해주시면 됩니다.
'컴퓨터 > CSR (React, Vue)' 카테고리의 다른 글
| [Vue] Visual Studio Code 에서 첫 환경설정 & 기본세팅 (window) (0) | 2023.03.18 |
|---|---|
| [React] 클릭이벤트 시 onClick 으로 구현 + 전역 function 으로 구현 시점 차이(프론트앤드 과제전형) (2) | 2023.02.18 |
| [React] 이미지 업로드 + 미리보기 구현하기 (0) | 2023.02.04 |
| [React] React-Router-Dom 버전v6 _BrowserRouter 와 HashRouter 차이 (2) (0) | 2022.12.28 |
| [React] React-Router-Dom 버전v6 과 라우터, 라우터 컴포넌트 종류 (1) (0) | 2022.12.21 |
댓글