Tag: svg

2020
Clone

React와 SVG로 Circular 타이머 구현하기

시작하기svg와 react, moment를 이용해서 다음 이미지와 같지는 않더라고 흡사한 타이머를 구현해 보도록 하겠습니다. 설치하기123create-react-app timer --typescriptcd timernpm i moment @types/moment styled-components @types/styled-components @fortawes

frontendsvg

SVG path(패스)

svg 선 명령어<path> 노드에는 다섯 개의 선 명령어가 있습니다. MoveLine 명령어는 두 점 사이에 선을 그리는 역할을 합니다.첫 번째 명령어는 ‘Move To(이동하기)’ 혹은 M 입니다.이 명령어는 두 개의 파라미터로 x와 y 좌표를 받습니다.그리기 커서가 이미 페이지의 다른 곳에 있었더라도 두 점 사이에 점이 그려지지는 않습니다.

frontendsvg

SVG 설명

SVG란? SVG는 Scalable Vector Graphics를 나타냅니다. SVG는 웹에 대한 벡터 기반 그래픽을 정의하는 데 사용됩니다. SVG는 XML 형식으로 그래픽을 정의합니다. SVG 파일의 모든 요소와 속성을 애니메이션으로 만들 수 있습니다. SVG는 W3C 권장 사항입니다. SVG는 DOM 및 XSL과 같은 다른 W3C 표준과 통합되었습니다

2019
frontendreact

React에서 Fontawesome 사용하기

시작하기고해상도의 아이콘을 손쉽게 사용할수 있는 라이브러리입니다.리액트에서 fontawesome을 사용하겠습니다. 패키지 설치React-fontawesome 패키지를 설치합니다.react-fontawesome npm npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-ic