05/01

Posted by:

|

On:

|

fontawesome에서 SVG 파일을 받지 않고 아이콘 사용 방법

  1. 다음의 값들을 인스톨 한다(powershell)
    npm i @fortawesome/fontawesome-svg-core svg core 설치
    npm i @fortawesome/free-solid-svg-icons 아이콘 패키지 설치
    npm i @fortawesome/free-regular-svg-icons 아이콘 패키지 설치
    기타 다른 무료로 제공해주는 아이콘들 패키지도 설치 가능하다.
    npm i $fortawesome/react-fontawesome@latest React 컴포넌트 설치
  2. 사용하고 싶은 jsx에 다음의 값들을 추가한다
    import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'  FontAwesomeIcon라는 컴포넌트를 사용함
    import {faEnvelope} from '@fortawesome/free-solid-svg-icons'  예시로 편지 모양을 불러내는 값을 만들었다. 원하는 svg를 불러오고 싶다면 https://fontawesome.com/search?o=r&m=free 에서 필요한 아이콘을 찾아서선 두께,크기,색 같은 값들을 지정 한 후 밑에 react를 클릭하면 어떤 형식으로 들고와야 하는지 알려준다.
  3. 2번의 2개를 불러냈다면 다음의 작업을 해주면 된다.
    <FontAwesomeIcon icon={faEnvelope}/>

저 안에 style을 넣어서도 색이나 크기 같은 기본적인 CSS 변경은 그대로 적용된다.

React slick – https://react-slick.neostack.com/docs/get-started

  1. 인스톨 하기
    npm install react-slick
  2. CSS 추가해서 적용시키기
    npm install slick-carousel
    import "slick-carousel/slick/slick.css";
    import"slick-carousel/slick/slick-theme.css";
  3. 위의 사이트에서 Examples에서 원하는 slick 모양을 들고온다. 클래스형 컴포넌트이기 때문에 바로 적용하기 보다는 임의로 jsx 파일을 만들어서 그 안에 적힌 코드 내용을 그대로 복사해서 붙여넣은 뒤 원하는 스타일이나 모양으로 수정 하고 자신이 짜는 컴포넌트의 형태가 함수형이면 함수형으로 최종으로 고친 뒤에 진짜로 실행할 코드에 넣는다.