반응형 React3 storybook에서 svgr 웹팩 설정이 동작하지 않을 때 😥 문제상황 storybook은 file-loader가 기본 설정으로 되어 있어서 @svgr/webpack을 설정하고 싶은 경우에는 main.js에서 unshift를 사용해 웹팩 설정을 해주어야 한다. config.module.rules.unshift({ test: /\.svg$/, use: ["@svgr/webpack"], }); next.js에서 storybook을 설치하고 @svgr/webpack을 설정해줄 때는 잘 동작했었는데, cra에서 storybook을 설치하고 @svgr/webpack을 설정하려니 동작하지 않았다. 🔨 해결책 @svgr/webpack 대신에 babel-plugin-inline-react-svg을 사용하였다. 이 경우에는 main.js에서 설정하는 방식이 웹팩과 달라진다. /.. 2021. 8. 5. ReactComponent를 통해 svg 를 컴포넌트처럼 사용하기 ReactComponent를 통해 svg 파일을 컴포넌트처럼 사용하면 fill 속성을 변경하여 svg 에셋의 색을 설정할 수 있다! svg 파일 코드를 뜯어보면 다음과 같다 혹은 이런 형식이다. 첫번째 svg의 경우 색상을 바꾸는 방법은 다음과 같다. import styled from "styled-components"; import { PlusIcon } from "@assets/icons/common"; const IconBox = () => { return ( ); }; const Container = styled.div` width: 20px; height: 20px .plus_icon{ width: 10px; height: 10px; path { fill: #ffffff; } } `; 이렇게 s.. 2021. 7. 24. styled-components로 checkbox 커스텀하기 웹 사이트 제작을 하면서 체크박스를 커스텀해야할 상황이 생겼는데, 다들 css를 사용하여 커스텀하는 방법을 사용하고 있었다. 나의 경우에는 styled-components를 사용하여 커스텀을 하고 싶었기 때문에 관련 자료들을 찾아보다가 medium.com/@colebemis/building-a-checkbox-component-with-react-and-styled-components-8d3aa1d826dd Building a Checkbox Component with React and styled-components A (mostly) hack-free approach medium.com 이 분이 작성한 글을 발견하게 되었다! 체크박스 커스텀을 위해서는 4가지 컴포넌트가 필요하다. 1. 체크박스 컨테이.. 2021. 4. 22. 이전 1 다음 반응형
