Vue 기반 사용자 정의 구성 요소 도입 아이콘

머리말
프로젝트 개발 에서 아이콘 을 사용 하 는 방식 은 여러 가지 가 있 습 니 다.iconfont에서 적당 한 아이콘 을 찾 을 수 있 습 니 다.http 또는 직접 다운로드 해서 사용 할 수 있 습 니 다.여기 서 저 는 사용자 정의 구성 요 소 를 실현 하 는 방식 으로 아이콘 을 도입 하 는 것 을 공유 합 니 다.
환경 을 조성 하 다
이 곳 은@vue/cli 4.5.13 새 항목 을 통 해 svg-sprite-loader 에 의존 하여 대응 하 는 svg 아이콘 을 처리 하여 사용 할 수 있 도록 설치 해 야 합 니 다.
설치:npm install --save-dev svg-sprite-loadervue.config.js 설정
svg-sprite-loader 를 설치 한 후 vue.config.js 를 새로 만들어 의존 도 를 설정 합 니 다:

// vue.config.js
const { resolve } = require('path')

module.exports = {
  chainWebpack(config) {
    config
      .module
      .rule('svg')
      .exclude
      .add(resolve('src/icons'))
      .end()
    config
      .module
      .rule('icons')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

chain Webpack 을 통 해 두 가지 설정 을 만 들 었 습 니 다.

첫 번 째 는 svg 의 의존 을 처리 하지 않 고 src/icons 에서 사용자 정의 아이콘 파일

을 처리 하 는 것 입 니 다.

svg-sprite-loader 를 통 해 사용자 정의 아이콘 파일 을 처리 합 니 다.options 의 설정 은 svg 의 symbolId 를 icon 과 파일 이름 의 조합 으로 표시 합 니 다.

새 아이콘 구성 요소
components 디 렉 터 리 에 SvgIcon.vue 파일 을 새로 만 듭 니 다:

<template>
  <i class="icon">
    <!-- aria-hidden,         (                  ) -->
    <svg aria-hidden="true" :width="size" :height="size" :fill="fillColor">
      <use :xlink:href="iconName" rel="external nofollow" ></use>
    </svg>
  </i>
</template>

<script lang="ts">
import { PropType, toRefs } from 'vue'

export default {
  props: {
    size: {
      type: Number as PropType<number>,
      default: 14
    },
    fillColor: {
      type: String as PropType<string>,
      default: '#000'
    },
    iconName: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup(props: any) {
    const { size, fillColor, iconName: _iconName } = toRefs(props)
    const iconName = `#${_iconName.value}`

    return {
      size,
      fillColor,
      iconName
    }
  }
}
</script>

그리고 icons 디 렉 터 리 를 새로 만 들 고 index 파일 을 새로 만 들 며 구성 요소 에 걸 고 svg 아이콘 을 가 져 옵 니 다.

// index.ts
import SvgIcon from '@/components/SvgIcon.vue'
import { App } from 'vue'

export default (app: App) => {
  app.component('svg-icon', SvgIcon)
}

const ctx = require.context('./svg', false, /\.svg$/)
const requestAll = (ctx: __WebpackModuleApi.RequireContext) => ctx.keys().forEach(ctx)

requestAll(ctx)

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import installSvgIcon from '@/icons/index'

const app = createApp(App)

installSvgIcon(app)
app.mount('#app')

이 서 류 는 두 가지 일 을 했다.

전역 구성 요소 svg-icon 을 마 운 트 하 는 방법 을 내 보 냅 니 다.

require.context 를 통 해 svg 디 렉 터 리 에 있 는 아이콘 파일 을 자동화 도입 합 니 다.

구성 요소 사용
우선,우 리 는 icons/svg 디 렉 터 리 에 svg 아이콘 파일 을 저장 해 야 합 니 다iconfont.
그리고 다른 곳 에서 사용 할 수 있 습 니 다.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <svg-icon icon-name="icon-dashboard"></svg-icon>
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

구성 요소 svg-icon 을 통 해 직접 도입 한 다음 icon-name 에 전송 하면 됩 니 다.icon-name 의 값 은 icon 이 svg 파일 이름 을 연결 하여 구성 합 니 다.
총결산
이러한 사용자 정의 방식 으로 svg 아이콘 을 도입 하 는 것 은 매우 편리 합 니 다.아이콘 을 추가 하려 면 몇 걸음 이면 됩 니 다.

svg 파일 을 직접 다운로드 하여 해당 디 렉 터 리 에 넣 기;

이어서 svg-icon 구성 요 소 를 통 해 도입 합 니 다.

하지만 스타일 을 수정 할 때 css 를 통 해 수정 할 수 없다 는 점 은 불편 하 다.
Vue 를 기반 으로 사용자 정의 구성 요 소 를 구현 하 는 방식 으로 아이콘 을 도입 하 는 이 글 은 여기까지 소개 되 었 습 니 다.Vue 사용자 정의 아이콘 구성 요소 에 대한 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!