vue2中如何正確配置svg
在弄好了vue3模板之后，開始弄vue2模板，然后就卡在了svg配置上。
不是svg沒顯示就是svg沒顏色以及顏色不正常，摸索了許久才配置正常。
vue3用的是vite，而vue2用的是vuecli所以配置會(huì)不同，下面是配置步驟：
先安裝svg-sprite-loader: yarn add?svg-sprite-loader -D
(我vue2用的yarn，vue3用的pnpm，當(dāng)然你用什么隨便你)
目錄assets下創(chuàng)建icons文件夾用于存放svg
components下創(chuàng)建SvgIcon文件夾，內(nèi)創(chuàng)建index.vue作為全局svg組件：
<template>
? <div :style="{ width: width, height: height, display: 'inline-block' }">
? ? <svg :style="{ width: width, height: height }">
? ? ? <use :xlink:href="prefix + name" :fill="color"></use>
? ? </svg>
? </div>
</template>
<script>
export default {
? name: "svgIcon",
? props: {
? ? // xlink:href屬性值的前綴
? ? prefix: {
? ? ? type: String,
? ? ? default: "#icon-",
? ? },
? ? //svg矢量圖的名字
? ? name: {
? ? ? type: String,
? ? ? require: true,
? ? },
? ? //svg圖標(biāo)的顏色
? ? color: {
? ? ? type: String,
? ? ? default: "",
? ? },
? ? //svg寬度
? ? width: {
? ? ? type: String,
? ? ? default: "16px",
? ? },
? ? //svg高度
? ? height: {
? ? ? type: String,
? ? ? default: "16px",
? ? },
? },
};
</script>
完成后在此index.vue同級(jí)目錄下創(chuàng)建svgicon.js：
import Vue from "vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
// 全局注冊(cè)組件
Vue.component("svg-icon", SvgIcon);
// 定義一個(gè)加載目錄的函數(shù)
const requireAll = (requireContext) =>
? requireContext.keys().map(requireContext);
/**
?* require.context是什么？
?* 一個(gè)webpack的api,通過執(zhí)行require.context函數(shù)獲取一個(gè)特定的上下文,
?* 主要用來實(shí)現(xiàn)自動(dòng)化導(dǎo)入模塊（遍歷文件夾的文件，從中獲取指定文件，自動(dòng)導(dǎo)入模塊）
?* 在前端工程中,一個(gè)文件夾中的模塊需要頻繁引用時(shí)可以使用該中方式一次性引入
?* 可以使用這個(gè)api,它會(huì)遍歷文件夾中的指定文件,
?* 然后自動(dòng)導(dǎo)入,使得不需要每次顯式的調(diào)用import導(dǎo)入模塊
?*/
const req = require.context("@/assets/icons", false, /.svg$/);
// 加載目錄下的所有 svg 文件
requireAll(req);
完成后在main.js中全局注冊(cè)組件：
// svg
import "@/components/SvgIcon/svgicon";
完成后在vueconfigjs中進(jìn)行配置：
const path = require("path");
const { defineConfig } = require("@vue/cli-service");
const resolve = (dir) => path.join(__dirname, dir);
module.exports = defineConfig({
... //此處省略部分無關(guān)代碼
? 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();
? },
});
那么配置就已經(jīng)完成了，在任意vue文件中使用：
<svg-icon?name="vue" width="40px" height="40px"></svg-icon>
其中name屬性要傳入assets的icons的svg文件名，不帶后綴
blue archive 啟動(dòng)
