디자인 시스템 - vue 3용 아이콘

이제 모든 웹 애플리케이션은 프로젝트에 svg 아이콘을 사용합니다. svg는 자세한 보기, 해상도, 속도 등을 제공하기 때문에 각각 다른 접근 방식을 사용하여 프로젝트에 svg 아이콘을 로드합니다. 하지만 저는 개인적으로 Convert all svg's into one sprite.svg 접근 방식을 좋아합니다.

내가 이 패턴에 접근하는 이유를 알아보려면 이 문서guide를 참조하십시오.

Initial project setup

먼저 시스템에 vue cli를 설치하십시오.

$ npm install -g @vue/cli
       -OR-
$ yarn global add @vue/cli

vue cli를 사용하여 vue 프로젝트 생성

$ vue create svg-icon-setup
#choose: Vue 3 Preview (if you own setup your own configuration)
$ cd svg-icon-setup
$ yarn serve

이제 vue 앱이 준비되었습니다. 그런 다음 브라우저로 이동하여 다음 URL을 엽니다: http://localhost:8080/

Setup svg sprite icon.

동일한 코드 디렉토리에서 아래 명령을 실행하십시오.

$ vue add svg-sprite

이 애드온svg-sprint에 대한 자세한 정보는

svg-sprite가 프로젝트에 추가되면. 애드온은 다음과 같은 두 개의 파일을 생성합니다.

svg-icon-setup/src/components/SvgIcon.vue(아이콘 구성 요소)

svg-icon-setup/vue.config.js(빌드 구성)

이제 디렉토리 안에 자체 svg 아이콘src/assets을 추가할 시간입니다.

프로젝트에서 아래 코드 변경 사항을 바꿉니다.

<!-- src/App.vue -->

<template>
  <SvgIcon
    name="facebook"
  />
  <SvgIcon
    name="twitter"
  />
  <SvgIcon
    name="tumblr"
  />
</template>

<script>
import SvgIcon from '@/components/SvgIcon'

export default {
  name: 'App',
  components: {
    SvgIcon
  }
}
</script>

/* vue.config.js */

module.exports = {
  pluginOptions: {
    svgSprite: {
      /*
       * The directory containing your SVG files.
       */
      dir: 'src/assets/icons',
      /*
       * The reqex that will be used for the Webpack rule.
       */
      test: /\.(svg)(\?.*)?$/,
      /*
       * @see https://github.com/kisenka/svg-sprite-loader#configuration
       */
      loaderOptions: {
        extract: true,
        spriteFilename: 'img/icons.svg' // or 'img/icons.svg' if filenameHashing == false
      },
      /*
       * @see https://github.com/kisenka/svg-sprite-loader#configuration
       */
      pluginOptions: {
        plainSprite: true
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('svg-sprite')
      .use('svgo-loader')
      .loader('svgo-loader')
  }
}

위의 코드가 교체된 후. kill 및 serve once again를 실행합니다.

페이지는 스크린샷과 같이 아래에 렌더링됩니다.


그게 다야.

code repo에 대한 참조

balazsketyi unsplash의 표지 이미지