vue3+vue-cli4でsvgを使用する方法

1. svg-sprite-loader をインストールします

npm install svg-sprite-loader --save-dev

2. src/components/svgIcon に新しいコンポーネントindex.vueを作成します

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

<script>
import { computed } from "@vue/reactivity";
export default {
  name: "baseSvgIcon",
  props: {
    iconClass: { type: String },
    className: { type: String },
  },
  setup(props) {
    const iconName = computed(() => {
      return props.iconClass ? `#icon-${props.iconClass}` : "#icon";
    });
    const svgClass = computed(() => {
      return props.className ? "svg-icon " + props.className : "svg-icon";
    });
    return { iconName, svgClass };
  },
};
</script>

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

3. アセットにアイコンフォルダーを作成します

imgs フォルダーには、svg 形式のファイルが含まれる svg フォルダーと、index.js ファイルが含まれており、ファイルの内容は次のとおりです

// 获取当前目录所有为.svg的文件
const req = require.context('./svg', false, /\.svg$/)

// 解析获取的.svg文件的文件名称并返回
const requireAll = (requireContext) =>{
    return requireContext.keys().map(requireContext)
}
requireAll(req)

4. 同じ配下に vue.config.js を作成しますsrc 構成としてのレベル

コメント領域にまとめられているように、vue-cli4 以外のプロジェクトにあり、エラーが config.module.rules.delete("svg"); で報告される場合。 、config.module.rule("svg").exclude.add(resolve("src/assets/imgs")).end();このステートメントを置き換えてみてください

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); // 重点：删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/assets/imgs')) // 处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
};

5. main.js に導入し、いくつかの小さな変更を加えます

ここで、コンポーネントの登録は main.js に配置されることに注意してください。それ以外の場合は、「[Vue warn]: Failed tosolveComponent: svg-icon」が報告され、親コンポーネントは先に作成されているが、子コンポーネントがまだ作成されていないことが予測され、本問題が発生します。 #

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/icons'

const app = createApp(App)

import SvgIcon from '@/components/svgIcon' 
app.component('svg-icon', SvgIcon)

app.use(store).use(router).mount('#app')

6. ページ上で

<div class="topLeft">
  <svg-icon icon-class="category"></svg-icon>
</div>
<div class="topCenter"></div>
<div class="topRight">
  <svg-icon icon-class="search"></svg-icon>
</div>

を使用します。 7. ファイルのディレクトリ構造とその効果の表示

以上がvue3+vue-cli4でsvgを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。