React에서 FontAwesome을 쉽게 사용
6075 단어 npmReactFontAwesome
소개
React에서 Font Awesome을 scss로 사용하려고합니다.
능숙하지 않고 조사하고 있으면, 굉장히 간편한 방법에 도착했으므로,
지금 경감이 있을 것 같습니다만, 공유합니다.
Font Awesome?
어쨌든 웹 페이지에서,
아이콘 폰트를 사용할 수 있게 되는 CSS 프레임워크입니다.
예를 들어 SNS 아이콘을 이미지로 준비하지 않아도 사용할 수 있으므로,
쉽고 가볍습니다.
무료와 유료가 있어 유료라면 사용할 수 있는 아이콘의 수가 늘어납니다.
환경
windows10
Node.js v8.12
React.js v16.8.6
전제
Font Awesome 공식은 이쪽
기본 사용법은 이쪽
구체적인 사용법은 이쪽
npm은 이쪽
React 전용은 이쪽
준비
적절하게 React 프로젝트를 만듭니다.
$ create-react-app fontawesome-hello
※후술의 샘플은, 불필요한 코드를 지우고 있습니다만,
이것으로 만들어진 코드에 그대로 기술해도 사용할 수 있습니다.
설치
$ npm install --save font-awesome
코드 재작성
index.js
가장 TOP의 구성 요소입니다.
여기에 방금 설치한 CSS를 로드합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
// ★これを追加するだけ
import 'font-awesome/css/font-awesome.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
App.js
실제로 font Awesome을 이용하는 컴포넌트입니다.
공식 사용법대로 class로 설정하여 이용합니다.
import React, { Component } from 'react';
// 別にクラスでなくても良い
class App extends Component {
constructor(props) {
super(props);
}
//★ <i className="fa fa-thumbs-up">でグッドアイコンが表示される
render() {
return (
<div>
hello font awesome<i className="fa fa-thumbs-up"></i>
</div>
);
}
//アイコンだけだとなんとなく寂しかったので文字も出しているが、今回の話と関係ない
}
export default App;
실행 결과
가장 오른쪽에 좋은 아이콘이 나오네요.
성공입니다!
소감
과거에 여러가지 시험해 4고 8고고했지만,
1명령으로 준비해 버리는 것은 매우 편하네요.
이 느낌이라면 Angura나 Vue.js에서도 사용할 수 있을 것 같고,
node.js의 서버 사이드 렌더링에서도 좋을 것 같습니다!
(시험하지 않았지만)
참고
Get Sass and Font Awesome up and running on your Create React App in 5 minutes
Reference
이 문제에 관하여(React에서 FontAwesome을 쉽게 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/t-motoki/items/506050d1504b920490de텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)