SVG 맞춤 구성요소

그래서 오늘은 React(with Vite)에서 SVG를 사용하는 방법에 대해 공유하려고 합니다.

알고 있거나 모르는 사람들을 위해 svg는 확장성이 뛰어난 벡터 그래픽(SVG에서 S가 의미하는 것)이며 매우 유용합니다.

그들은 위협적으로 느낄 수 있지만 일단 자신을 극복하고 나면 꽤 재미있고 계속 스스로에게 질문합니다.
javascript을 **typescript**과 함께 사용하면 팀이 작업할 공통 언어(인터페이스)를 개발하는 데 도움이 됩니다.
typescript은 다양한 용도로 사용되지만 실제 안전망이 아니라 편리함을 잊지 말자. 현실 세계에서 나는 joi 또는 zod 또는 기타 javascript 유형 검사 라이브러리와 같은 것을 사용하도록 옹호합니다.

스택은 다음과 같습니다.

초대

반응

타자기

스타일 구성 요소

전체 목록이 있지만 여기에 중점을 둘 것입니다.

내 유스 케이스는 일반적인 (충분한) SVG 구성 요소를 만들고 싶기 때문에 구현하려는 사람은 무엇을 사용할 수 있는지 알 필요가 없지만 자동 완성 기능이 있습니다.

먼저 svg를 가져와 public 폴더에 넣을 수 있습니다.
채우기 규칙이나 스트로크에 대해 scrub을 확인하십시오. 재정의를 더 쉽게 만듭니다.

styled-components는 있으면 좋지만 중첩된 svg 요소를 가져오기 위해 scss 또는 바닐라 css를 사용할 수 있습니다.

해당 구성 요소의 분석은 다음과 같습니다.

이제 여기서 수행한 작업을 살펴보겠습니다.

우선 우리는 SVG를 React 구성 요소로 가져오고 있습니다(반응에서 svg의 힘을 활용할 수 있는 다른 방법과 vite가 있음을 명심하십시오. 이 방법은 여기서 다루지 않을 다양한 솔루션을 제공합니다. 게시하다.

import { ReactComponent as Avatar } from '/public/avatar.svg';
import { ReactComponent as Dashboard } from '/public/dashboard.svg';
import { ReactComponent as Diamond } from '/public/dimond.svg';
import { ReactComponent as EmptyGames } from '/public/empty-games.svg';
import { ReactComponent as Logo } from '/public/is-logo.svg';
import { ReactComponent as Rocket } from '/public/rocket.svg';
import { ReactComponent as Text } from '/public/text.svg';
import { ReactComponent as NewWindow } from '/public/new-window.svg';
import { ReactComponent as PercentageCake } from '/public/percentage-cake.svg';
import { ReactComponent as NoData } from '/public/no-data.svg';
import { ReactComponent as Menu } from '/public/menu.svg';
import { ReactComponent as Breakdown } from '/public/breakdown.svg';
import { ReactComponent as Profile } from '/public/profile.svg';
import { ReactComponent as ClosedMenu } from '/public/menu-closed.svg';
import { ReactComponent as Collection } from '/public/apps.svg';
import { ReactComponent as Upload } from '/public/upload.svg';
import { ReactComponent as Empty } from '/public/empty.svg';
import { ReactComponent as Cart } from '/public/cart.svg';
import { ReactComponent as Collections } from '/public/collections.svg';
import { ReactComponent as Megaphone } from '/public/megaphone.svg';
import { ReactComponent as Wallet } from '/public/wallet.svg';
import { ReactComponent as Console } from '/public/console.svg';
import { ReactComponent as Back } from '/public/back.svg';

다음으로 구성 요소 설명자 유형을 정의합니다. 이것은 나중에 SVG 레코드 정의에 도움이 되며 기본적으로 각 키의 값이 해당 개체에 보유하게 될 것입니다.

type SVGComponentDescriptor = 
React.FunctionComponent<React.SVGProps<SVGSVGElement> 
& { title?: string | undefined; }>;

그런 다음 SVGKey 유형의 각 키를 매핑하는 작업을 진행합니다. 이것이 실제 자동 완성이 될 것이므로 여기에 실제 속임수는 없습니다.

export type SVGKey =
    | 'Avatar'
    | 'Collection'
    | 'Dashboard'
    | 'Upload'
    | 'Diamond'
    | 'EmptyGames'
    | 'Logo'
    | 'Rocket'
    | 'Text'
    | 'NewWindow'
    | 'PercentageCake'
    | 'NoData'
    | 'Menu'
    | 'Breakdown'
    | 'Profile'
    | 'ClosedMenu'
    | 'Wallet'
    | 'Cart'
    | 'Collections'
    | 'Megaphone'
    | 'Console'
    | 'Back'
    | 'Empty';

다음으로 구성 요소에 대한 소품을 정의합니다. 보시다시피 제가 추가한 맞춤 type 소품과 svg 요소에서 SVG 소품이 어떻게 보여야 하는지에 대한 react-typescript의 자체 정의가 병합됩니다.

type SVGProps = { type: SVGKey; } & React.SVGProps<SVGSVGElement>;

다음에는 키-값 쌍으로 액세스할 수 있는 SVG 개체가 있습니다.

export const SVG: Record<string, SVGComponentDescriptor> = {
    Avatar,
    Collection,
    Dashboard,
    Upload,
    Diamond,
    EmptyGames,
    Logo,
    Rocket,
    Text,
    NewWindow,
    PercentageCake,
    NoData,
    Menu,
    Breakdown,
    Profile,
    ClosedMenu,
    Empty,
    Megaphone,
    Wallet,
    Cart,
    Collections,
    Console,
    Back,
};

마지막으로 내보낸 구성 요소가 있습니다.

export default function FlameSVG(props: SVGProps) {
    const { type, ...otherProps } = props;
    const SVGComponent = SVG[type];
    return <SVGComponent {...otherProps} />;

그래서 여기서 우리가 한 것은 DOM svg props의 반응 구현과 우리 자신의 사용자 정의 유형으로 구성된 병합된 props 세트를 수락하는 것입니다.

그런 다음 type prop을 "뽑아서"사용할 수 있을 뿐만 아니라 이 prop을 알지 못하는 DOM 요소에 전파하지 않고(그렇게 하면 반응에서 오류가 발생함) rest 연산자를 사용합니다. 나머지 소품들.

이는 type 소품뿐만 아니라 사용하려는 모든 svg 소품에 대해 완전한 자동 완성 기능이 있음을 의미합니다.

그런 다음 이전에 생성한 SVG 객체 Record에 액세스하고 JSX SVG 요소를 반환합니다(실제 JSX는 아니지만 지금은 적절한 정의를 기억할 수 없습니다).

그것이 우리가 반환하는 것입니다. 또한 svg 구성 요소에 사용되었을 수 있는 DOM 소품을 spread 출력합니다. 그리고 짜잔! 기본 소품의 자동 완성과 DOM에서 반환되는 svg에 대한 제어.

이 정보가 도움이 되었기를 바랍니다. 사용해 보고 의견을 알려주세요.