React 리액트 - 리액트 style 아이콘 [Font Awesome]

 
 

icon

 
 
<Font Awesome>
- 다양한 아이콘 무료 사용 가능
- 애니메이션 아이콘 생성 가능
 
 
https://fontawesome.com/

Font Awesome

 
 

yarn add styled-components @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome styled-reset @fortawesome/fontawesome-svg-core react-router-dom

: 무료로 사용할 수 있는 아이콘 스타일 설치
 
- package.json에 설치됨
-> free-solid 및 free-regular 타입 아이콘 사용 가능
 
 

 
 
원하는 아이콘을 찾아 이미지 효과 등 부여 가능
-> 컬러, 애니메이션 등 적용 가능
 
 

아이콘 적용

 
 

 
 
REACT > Kit(Single)의 아이콘 이름만 복사해 사용
 
 
<Styled05.jsx>

import { faComment, faCommentDots } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import S from './style';

const Styled05 = () => {
  return (
    <div>
      <S.CommentIcon icon={faCommentDots} bounce />
    </div>
  );
};

export default Styled05;

 
 
<style.js>

import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const S = {}

  // 아이콘 스타일링
  S.CommentIcon = styled(FontAwesomeIcon)` 
    font-size: 100px;
    background-color: pink;
  `

export default S;

 
 
- 외부의 아이콘을 꾸미고 싶을 때 styled로 감싸 꾸며준다
-> styled(외부아이콘) 형태로 사용
 
-> 아이콘이지만 실제로는 폰트이기 때문에 폰트에 적용하는 이펙트 적용 가능
-> 사이즈, 컬러 등 변경
 
 
<결과화면>

 

 
https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일

https://developernew.tistory.com/445

React 리액트 - 폰트 스타일 적용 방법