# svg

6개의 포스트

svg 파일 react, next에서 사용하기

@svgr/webpack 깃헙npm i -D @svgr/webpacksvg파일을 react or next프로젝트에서 사용하자! 먼저 npm에서 svg 로더를 받아야 한다.next는 next.config.js를 프로젝트 루트에 작성하여 기존 설정을 수정할 수 있게 함sv

2020년 8월 1일
·
0개의 댓글
post-thumbnail

피그마로 SVG 파일 추출하기(id 값 자동생성) Exporting SVG files in Figma

벡터 이미지를 SVG로 추출할 때 Figma가 정말정말정말 유용하다.특히 이미지의 요소들을 따로 따로 애니메이션으로 조작해야 할 때, 피그마에서 미리 그룹을 지어서 내보내서 그룹별로 ID를 가져와서 사용하면 되니 아주아주 간편하다. (파일 추출시 "Include ID

2020년 7월 12일
·
1개의 댓글

2020.06.28.일

1.일주일 돌아보기 / 2.새로 알게 된 것(Styled-Components className / CSS border, 말줄임표시, transition / SVG방향 / Git / IE 지원 안되는거)

2020년 6월 28일
·
0개의 댓글
post-thumbnail

왕초보도 가능한 SVG 애니메이션 만들기 feat. Figma(무료)

svg를 다룰 줄 알게되면 별별 신기한 효과를 낼 수가 있다. https://www.stellaachenbach.com/ (우측 하단에 눈동자모양에 마우스를 올려보세요👀)그치만 코드로 그림을 표현한다는 것에 대한 심적 부담감이 크다면 Figma를 통해서 한번

2020년 6월 20일
·
4개의 댓글

[Vue.js] SVG 와 v-if, v-show 에 의한 랜더링 문제

개인적으로 진행중인 프로젝트에 Nuxt.js 를 도입해서 작업을 하고 있었는데 뜻밖의 상황에 한참을 삽질을 했습니다 문제 발생 문제가 발생한 조건은 다음과 같습니다. Fontawsome 을 설치하여 아이콘으로 사용 computed 에 정의된 값의 변화에 따라 토글이 되도록 v-if 를 사용 코드로 살펴보면 대략 이렇습니다. 굉장히 흔하고 간단한 vu...

2019년 2월 1일
·
4개의 댓글