El proyecto Vue presenta y usa svg

Con el aumento de las páginas del proyecto, el icono svg de la biblioteca de la interfaz de usuario es gradualmente insuficiente. Así que la interfaz de usuario proporcionó muchos iconos nuevos de svg. Obviamente, no es práctico introducirlos uno por uno, por lo que colocan el svg en la 指定carpeta y luego los importan en lotes y utilizan este montón de svg a través de los componentes.

Estructura del proyecto

|--build
|   `-- webpack.base.js
`--src
    `-- assets
        `-- icons
            |-- index.js
            `-- svg
                `-- 全部的svg图标 `xxx.svg`

Probablemente la estructura del directorio sea la siguiente, porque es escribir su propia configuración de paquete web, inferior diría vue.config.jsque cómo transformar
todos los iconos svg en la assets/icons/svgcarpeta. assets/icons/index.js¿Es nuestro archivo de entrada importado?

Importar dinámicamente todos los svg

assets / icons / index.js

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)

requireAll(req)

El documento index.js es introducir ./svgtodos los .svgarchivos de directorio , use requireAll introducido, uno necesitaría introducirlo manualmente

Crea componentes, usa svg

Solo svg recursos en el directorio de activos, seguido del nuevo ensamblado, por lo que en src/componentsel directorio, cree un nuevo SvgIcon.vuecomponente

src / components / SvgIcon.vue

<template>
  <svg class="svg-icon" aria-hidden="true" v-if="iconName">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
import '../assets/icons/index'
export default {
  name: 'SvgIcon',
  props: {
    name: {
      default: '',
      type: String
    }
  },
  computed: {
    iconName() {
      let name = this.name
      if (name) {
        return `#icon-${name}`
      } else {
        return '#icon-icon'
      }
    }
  }
}
</script>

Preste atención al código de la línea 8 e introduzca el archivo js correspondiente. Así que cuando registremos el componente, automáticamente introduciremos el icono correspondiente.

Presta atención a la línea 21 #icon-${name}que explicaré más adelante.

Modificar la configuración del paquete web

Los componentes están listos, pero el paquete web solo reconoce archivos js, por lo que tenemos que encontrar los complementos correspondientes que admitan svg svg-sprite-loader

npm i svg-sprite-loader -D

La configuración del paquete web del proyecto

Si tiene un paquete web de configuración autodefinido, busque module.rulesagregar un svg de procesamiento:

webpack.config.js

svgoConfig es el contenido personalizado de mi proyecto, solo como referencia, opcional a pedido

En segundo lugar, si la configuración de svg entra en conflicto con otras bibliotecas (como iview), configuré solo designado /src/assets/iconspara hacer la conversión, y el resto queda para url-loadertratar

Dado que svg-sprite-loader ha procesado la carpeta especificada, url-loaderdebe repetir el proceso (para comprender esta parte de la configuración de las funciones principales del efecto es la misma)

De esta manera, el svg original del proyecto puede procesarse sin verse afectado, y el complemento también procesa el icono svg recién agregado.

var svgoConfig = JSON.stringify({
    
    
  plugins: [
    {
    
     removeTitle: true },
    {
    
     convertColors: {
    
     shorthex: true } },
    {
    
     convertPathData: true },
    {
    
     cleanupAttrs: true },
    {
    
     removeComments: true },
    {
    
     removeDesc: true },
    {
    
     removeUselessDefs: true },
    {
    
     removeEmptyAttrs: true },
    {
    
     removeHiddenElems: true },
    {
    
     removeEmptyText: true }
  ]
})

module: {
    
    
  rules: [
    {
    
    
      test: /.*\.svg$/,
      loaders: [
        {
    
    
          loader: 'svg-sprite-loader',
          options: {
    
    
            symbolId: 'icon-[name]'
          }
        },
        'svgo-loader?' + svgoConfig
      ],
      include: [
        // 处理不了 iview 的字体，所以只处理本地svg
        resolve('/src/assets/icons')
      ]
    },

    {
    
    
      test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
    
    
        publicPath: '../../',
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[ext]?[hash:7]')
      },
      exclude: [resolve('/src/assets/icons')] // 已经交由 svg-sprite-loader 处理，就排除指定文件夹
    }
  ]
}

Configuración de vue-cli

Documento de configuración de vue-cli

Del mismo modo, vue-cli tiene por defecto el procesamiento del complemento svg, por lo que la primera src/assets/iconsexclusión

Luego, a través del svg-sprite-loader para configurar el icono de procesamiento

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

El misterio del nombre del icono

Puede ver si es la configuración del paquete web o la configuración de vue-cli, hay un período en la icon-[name]configuración options.symbolId . Es por eso que identificamos los componentes clave de los que, al final, svg usa, por lo que aquí se icon-necesitan y devuelven componentes del #icon-${name}mismo formato.

Si no desea llamarlo icon-xxx, recuerde cambiar los componentes y la configuración del paquete web tuvo que sincronizar las modificaciones.

Usar componente svg

Los pasos para introducir componentes no están escritos. El uso es el siguiente:

ejemplo es el nombre de archivo del svg, el archivo es el siguiente: assets/icons/svg/example.svg

<svg-icon name="example" />

De esta manera, puede usar el svg personalizado felizmente.