El uso de componentes svg en el proyecto vue-cli y análisis de los principios del uso de svg

Encontré el uso de svg en el proyecto vue-cli y registré el proceso de exploración de sus principios de uso.

• referencia de archivo svg

1. Primero, eche un vistazo al directorio svg de este proyecto. Varios archivos svg se almacenan en los directorios src/icons y svg (puede obtener la dirección de la biblioteca de Alibaba en la biblioteca de vectores iconfont de Alibaba ) .

---

 2. Abra index.js debajo de los íconos de la siguiente manera:

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
import generateIconsView from '@/views/svg-icons/generateIconsView.js' // just for @/views/icons , you can delete it
// register globally
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('./svg', false, /\.svg$/)
const iconMap = requireAll(req)

generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it

---

analizar:

// Obtenga el contexto del archivo que debe importarse. Lo que se devuelve es una función. Para comprenderlo, puede consultar otro blog: Comprender require.context

const req = require.context('./svg', falso, /\.svg$/)

Envié req en la consola:

Esta función tiene tres propiedades:

Esta función tiene tres atributos: resolver, claves, id.

        · resolver: es una función que devuelve el ID del módulo que se está resolviendo.

        · claves: también es una función que devuelve una matriz que consta de todos los objetos de solicitud que pueden ser analizados por el módulo de contexto.

        · id: ID del módulo de contexto

La función teclas() es llamada por la siguiente función (hice el siguiente resultado):

const requerirTodo = requerirContexto => {

    consola.log('2222')

    console.log(requireContext.keys())

    consola.log('33333')

    console.log(requireContext.keys().map(requireContext))

    return requireContext.keys().map(requireContext) //requiere todos los archivos svg en la carpeta svg

}

El propósito de esta función es hacer referencia a todos los archivos .svg en la carpeta svg de una manera similar a require('./svg/wechat.svg') ;

Salida de consola:

Expanda la segunda salida:

El siguiente paso es introducirlo en main.js y luego llamarlo en el componente svg.

        importar './icons' // icono

importe SvgIcon desde '@/components/SvgIcon' // componente svg, el componente escrito por usted mismo se usa para llamar al archivo svg. El componente svg solo necesita obtener el nombre del archivo svg para que surta efecto.

<svg-icon class-name="disabled" :icon-class=" item " /> //elemento es el nombre del archivo .svg

• Fuente del componente svg:

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

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

Lo anterior es la definición del componente. Recibe dos parámetros, className e iconClass: className es opcional; iconClass es en realidad el nombre del archivo .svg.

<svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>

Este párrafo es una forma fija de llamar archivos svg. No hay necesidad de preocuparse por por qué se usa de esta manera (si desea estudiar por qué, puede dedicar tiempo a explorarlo usted mismo)

• Finalmente, hablemos de algunas formas útiles de usar archivos svg en proyectos sin usar componentes.

1. Utilice la etiqueta <img> como imagen

<img src="mySVG.svg" alt="" />

2. Como imagen de fondo CSS

.el {background-image: url(mySVG.svg);}

3. Personalmente encuentro que otras etiquetas iframe, como la etiqueta a, son incómodas de usar.

Esta exploración termina aquí, puede que no sea completa, ¡es solo como referencia! Si tiene alguna pregunta que deba discutirse juntos, no dude en comunicarse, ¡gracias!