# react-icons

smin_0820

📌소개 리액트를 이용해서 웹페이지를 구현할 때 사용하는 방법이며 간편하게 아이콘(react-icons)을 적용하는 방법을 정리한 글이다. React-icons 우선, 사용하기 전에 라이브러리를 설치해야 한다. 📌 설치 방법 📌 사용 방법 필요한 아이콘을 좌측 검색창에 검색한다. (나는 삭제 아이콘이 필요해서 trash를 검색했다) 마음에 드는 아이콘을 클릭하면 'Copied 'BsFillTrashFill' to clipboard' 문구가 화면에 나타나다. 아래 코드와 같이 import로 아이콘을 불러와서 사용하면된다.

cptkuk91

React Icons와 달리, react-social-icons에는 다양한 회사 로고들이 있습니다. Svg 형식으로 제공됩니다. 사용법이 간단하기 때문에 아래 참고하시면 좋아보입니다. https://www.npmjs.com/package/react-social-icons > 설치 방법 > 사용 방법 프로젝트에 따라 다르겠지만, ReactDom.render를 사용하지 않는 저는 아래 방법으로 사용했습니다. 그외 다양한 옵션들이 존재하고 있습니다. 예를들면 배경색을 설정하는 bgColor, 아이콘 색을 설정하는 fgColor등등.. ![](https://velog.velcdn.com/images/cptkuk91/post/5df60b3d-dc0f-4fa3-a6f4-17525a1255f6/ima

ahuuae

📍 리액트 아이콘 리액트의 라이브러리로 수 많은 아이콘을 컴포넌트 형식으로 사용 할 수 있다. 터미널에서 npm을 사용해 설치한다. [React icon]:https://react-icons.github.io/react-icons [React icon] 에서 원하는 아이콘을 찾아서 불러 올 수 있다. 사용할 컴포넌트에서 원하는 아이콘을 불러와서 컴포넌트처럼 사용하면 된다.

cinephile

학습내용 팀원별 이벤트 필터링 이벤트 댓글수 표시 팀원별 이벤트 필터링 (캡쳐하면서 마우스 커서가 사라졌지만 이름 위에 마우스 커서가 올라가 있는 상태) components/Footer.jsx redux/modules/calendarSlice.js Footer에서 showFilter, hideFilter가 실행되면 Calendar 컴포넌트에서 적용이 되어야 하는데 두 컴포넌트는 부모-자식이 아니라 동등한 컴포넌트이므로 전역 상태로 관리했다. > 보완점 현재는 showFilter 실행시 해당 이벤트를 제외한 나머지 이벤트가 전부 사라지는데 전체 이벤트 중 해당 이벤트의 스타일만 변경하는 방식으로 구현할 것 이벤트 댓글수 표시

minsu2344

react-icons 리액트에서 아이콘을 자유롭게 사용 npm 설치 후 원하는 아이콘 import하여 태그에 적용 홈페이지 주소(https://react-icons.github.io/react-icons input 디자인 border는 기본 테두리 / outline은 focus시 테두리 &::placeholder로 디자인 가능 flex:1로 설정하면 버튼 사용하고 남은 공간 모두 input으로 채움 button 디자인 &:hover 사용하여 마우스 올렸을 때 색 변화 결과

soohyang136

React와 Next.js로 프로젝트를 진행하다가 React에서 icon을 쉽게 넣는 방법을 알아냈다. React-icons https://react-icons.github.io/react-icons 이 링크를 따라 들어가보면 사용 방법과 아이콘을 검색할 수 있는 사이트가 나옵니다. 이렇게 npm install로 먼저 다운로드를 합니다. 그리고 위 사이트에 들어가서 필요한 icon을 검색합니다. 이 페이지에서 마음에 드는 아이콘을 클릭하시면 뭔가가 복사되었다고 뜰겁니다. 그 다음, 위 코드 처럼 import {복사한 내용 붙여넣기} from 'react-icons/복사한 내용의 앞 글자 넣기' 이렇게 import 해주시고 컴포넌트 태그처럼 ** 이렇게 사

tootb

프로젝트 진행사항 공통 깃허브 마일스톤/이슈 올리는 것 => 각자 깃허브 Wiki 작업 => 솔찬님 브랜치구성 : main => 프론트=> 이종호 // 이규림 => 백 => 구솔찬 // 이창주 AWS 사용으로 결정 페이지네이션 1페이지/ 15페이지씩 마지막 페이지인지 true/false 반환할 수 있어야함 백엔드 프론트엔드 회원가입/ 로그인 뷰단 작업 완성 오늘까지 할 일 [X] 깃허브 마일스톤/이슈 올리기 [X] FE 깃허브 레포지토리에 commit => push => pull request [X] 로그인/회원가입 화면 디자인 클론 완료 TIL 1. 깃허브 이슈 > The Issues API enables you to view and manage issues, including issue assignees, comments, labels, and milestones 출처: https://d

ctdlog

lighthouse 점수 올리기 대작전 프로젝트 진행 과정 중에, 맡은 파트가 생각보다 일찍 끝나기도 했고 페이지 자체에 이미지가 많이 들어가기 때문에 성능 개선에 대한 관심이 생겼다. 생각난 김에 lighthouse를 바로 돌려봤는데 점수가 > 보다시피 Performance 부분의 점수가 36점이다 하하 점수가 왜 이렇게 낮을까... 살펴보니까 > 첫번째로, Reduce unused Javascript인데 직역하면 사용하지 않는 자바스크립트 파일을 줄이라는 뜻이다. 가장 위의 용량이 큰 파일을 보면 bundle.js라

xmstlf0903

1. 설치 방법 2. 아이콘 찾기 > react-icons 접속 https://react-icons.github.io/react-icons 이 링크에서 원하는 아이콘을 찾는다. 3. import 하기 IoMdSubway라는 아이콘을 예시로 들어보자. {} 안에 본인이 쓸 아이콘 이름을 적고 "react-icons/"뒤에 아이콘의 앞 두글자를 소문자로 적는다. 즉 {}안에 IoMdSubway를 적고 IoMdSubway의 앞 두글자인 io를 "react-icons/"뒤에 소문자로 적는다. 4.

daymoon_

✅ 운영체제 : Windows 11 react-icons > 🎨 참고자료 NPM React Icons Yarn React Icons react-icons를 이용하면 React 프로젝트에 아이콘을 쉽게 추가할 수 있다. ES6 import를 활용하여 필요한 아이콘만 포함시킬 수 있다. 적용 방법 > 📌 React Icons : https://react-icons.github.io/react-icons ☃️ NPM 설치 ☃️ Yarn 설치 ☃️ **코드

carrot

* styled-jsx는 CSS-in-JS 라이브러리로 css를 캡슐화하고 범위가 지정되게 만들어 구성 요소를 스타일링 할 수 있습니다. 한 구성 요소의 스타일링은 다른 구성요소에 영향을 미치지 않도록 하는 특징을 가지고 있습니다. next에서 기본으로 제공하므로 설치가 필요 없고 활용이 간편합니다. > example.jsx 1. github 프로필 스타일링 > pages/users/[name].jsx 2. react-icons react-icons를 설치하고 필요한 아이콘을 import해서 사용해 보도록 하겠습니다. 우선 view에 해당하는 Profile.jsx 컴포넌트를 생성해 코드를 분리하고 리액트 아이콘을 활용하여 출력을 개선해 보도록 하겠습니다. > components/Profile.jsx github api로 데이터를 가져와 동적 컴포넌트에 props로 전달하는 로직은 [name].jsx 컴포넌트에 남겨

uoayop

상황 react-icons를 사용하기 위해 설치 후, 아이콘을 불러오자 다음과 같은 에러가 발생했다. 에러 코드 react-icons 사용 방법 > > 출처: https://grahams.tistory.com/161 [MakeDesire] 해결 방법 Attempted import error: 'FaPencil' is not exported from 'react-icons/fa' ![](https://images.velog.io/images/uoayop/post/8c9659f5-82e9-4525-83f8-8d1eafc85c32/%E1%84%89%E