§@gravity-ui/illustrations ·

§설치

npm install --save-dev @gravity-ui/illustrations

§사용법

§React

§준비

일러스트레이션 테마를 설정합니다. 다음 단계 중 하나를 실행하세요:

§자체 색상 팔레트로 CSS 토큰 정의

앱에서 다음 CSS 토큰을 정의합니다:

--gil-color-object-base: rgb(255, 190, 92);
--gil-color-object-accent-heavy: rgb(211, 101, 7);
--gil-color-object-hightlight: rgb(255, 216, 157);
--gil-color-shadow-over-object: rgb(211, 158, 80);
--gil-color-background-lines: rgb(140, 140, 140);
--gil-color-background-shapes: rgb(242, 242, 242);
--gil-color-object-accent-light: rgb(255, 255, 255);
--gil-color-object-danger: rgb(255, 0, 61);

§SCSS에서 기본 gravity-theme 믹스인 사용

다양한 테마에서 일러스트레이션 스타일링을 위해 다음 믹스인을 사용합니다.

@import '@gravity-ui/illustrations/styles/theme.scss';

.g-root {
  &_theme_light {
    @include g-illustrations-colors-light;
  }

  &_theme_light-hc {
    @include g-illustrations-colors-light-hc;
  }

  &_theme_dark {
    @include g-illustrations-colors-dark;
  }

  &_theme_dark-hc {
    @include g-illustrations-colors-dark-hc;
  }
}

§미리 설치된 gravity 테마가 있는 프로젝트의 대안

또는, 프로젝트에 @gravity-ui/uikit이 이미 설치되어 있고 기본 테마를 사용하는 경우, 프로젝트의 루트 스타일 파일에 styles.scss를 가져오기만 하면 됩니다:

// 기존 gravity 스타일 정의
import '@gravity-ui/uikit/styles/styles.css';
// 바로 아래에 한 줄 더 추가
import '@gravity-ui/illustrations/styles/styles.scss';

§컴포넌트 사용법

import NotFound from '@gravity-ui/illustrations/NotFound';

또는

import {NotFound} from '@gravity-ui/illustrations';

§SVG

이를 위해 적절한 로더가 필요할 수 있습니다.

import notFound from '@gravity-ui/illustrations/svgs/not-found-light.svg';

§개발

새로운 디자인에 맞춰 일러스트레이션을 업데이트하려면, 라이트 테마의 SVG 콘텐츠를 변경합니다 (<이-저장소-루트>/svgs/<일러스트레이션-이름>-light.svg 파일) 그런 다음 명령을 실행합니다:

npm run generate