Next.js + react-konva에서 Font Awesome을 이용한 메모
4976 단어 konvaReactFontAwesome
개요
Font Awesome을 이용하여 아이콘을 표시했다.
적용되는 속성에 약간의 버릇이 있었기 때문에 메모.
이 시점의 소스
Font Awesome 확인
이번에는 하트를 사용하고 싶었기 때문에 그쪽을 확인한다. 확인해야 스타일과 유니 코드.
f004 하지만, solid와 regular로 보이는 방법이 다르다. 다음은 Regular 
출처
CDN에서 로드
pages/trpg-manual/index.tsx
const Home: NextPage = () => {
return (
<div className="container">
<Head>
<title>僕の私のTRPG説明書</title>
+ <link
+ rel="stylesheet"
+ href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
+ integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V"
+ crossOrigin="anonymous"
+ />
</Head>
Konva에서 사용
Font Family 설정
components/organisms/trpg-manual/ImageArea.tsx
const family = {
gothic:
'"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif',
serif:
'"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif',
+ fontawesome: '"Font Awesome 5 Free", "Font Awesome 5 Brands"',
}
Font Weight 설정
components/organisms/trpg-manual/ImageArea.tsx
const faWeight = { solid: '900', regular: '400', brands: '400', light: '300' }
유니코드 설정
\u + unicode의 형태로 지정한다 components/organisms/trpg-manual/ImageArea.tsx
const faUnicode = { heart: '\uf004', check: '\uf00c' }
Text 요소에서 사용
fontStyle 라는 속성으로 설정하므로 주의. components/organisms/trpg-manual/ImageArea.tsx
import { Stage, Layer, Rect, Text, Ellipse } from 'react-konva'
// 省略
<Text
x={x}
y={y}
width={inputWidth}
align="left"
text={faUnicode.heart}
fill={sheet.heartColor}
fontFamily={family.fontawesome}
+ fontStyle={faWeight.solid}
fontSize={60}
/>
참고
Font Awesome 사용(ver5.9 이상)
Konva
Font Awesome Heart Regular
Font Awesome Heart Solid
Reference
이 문제에 관하여(Next.js + react-konva에서 Font Awesome을 이용한 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hibohiboo/items/b58d98b73b6d53ccab8e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
