makestar-design-system v1.0.17

Makestar Design System 사용 가이드

1. SvgIcon 사용 방법

1. 패키지 설치

   yarn add vite-plugin-svg-icons -D

2. nuxt.config.ts 설정 추가

   vite: {
           ...
           plugins: [
               createSvgIconsPlugin({
                   iconDirs: [path.resolve(__dirname, "node_modules/makestar-design-system/dist/icons")],
                   symbolId: "icon-[name]",
                   customDomId: "__svg__icons__dom__"
               })
           ]
       }

3. app.vue

   import "virtual:svg-icons-register"

4. SvgIcon 컴포넌트 사용

   <SvgIcon name="icon-event-line" width="32" height="32"></SvgIcon>
   <SvgIcon name="icon-event-line" width="32" height="32" :color="'#FFCC66'"></SvgIcon>
   <SvgIcon name="icon-event-line" width="32" height="32" :style="{ color: 'var(--text--accent1)' }" />