[DAY59]TIL

이모티콘 컴포넌트 만들기

1. 문제
   svg 파일로 된 이모티콘 이미지를 받아왔는데, 이를 화면에 그려줄 때 어떻게 해야할 지 모르겠다.

2. 시도
   일단 svg파일을 임포트 해온다. 그런데 크기가 제대로 수정되지 않거나, 색상이 원하는대로 바뀌지 않았다. 또한 색상을 바꾸더라도 디자이너가 디자인한것처럼 둥글둥글한 별이 되지 않았음 !

3. 해결

import React from "react";
import { ReactComponent as StarIcon } from "../../assets/emoticon/star.svg";
import styled from "styled-components";

type Props = {
  size?: string;
  value?: number;
  color?: string;
  onClick(): void;
};

const Star = ({ size, onClick, value, color }: Props) => {
  return (
    <StStarButton type="button" value={value} onClick={onClick}>
      <StarIcon height={size} width={size} fill={`${color}`} stroke={`${color}`} />
    </StStarButton>
  );
};

<svg width="current" height="current" viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="current" stroke="current" />

4. 알게된 점
   svg파일을 임포트 해올때에는 { ReactComponent as 사용할이름 }으로 해와서 사용해주면 됨.
   onClick도 타입지정해서 props로 내려줄 수 있음.
   svg 파일 내에서 width, height, fill, stroke를 current로 설정해주면, 커스터마이징이 가능함.