Vue - vite（vue3）引用svg

Vue - vite（vue3）引用svg

  

引用：SVG 文件的引入方式之一：以 URL 的方式引入 SVG 文件，vue2、vue3+Vite vite-svg-loader-CSDN博客

https://blog.csdn.net/KimBing/article/details/135358798

 

环境 vue3 、vite 、 ts

 

vue2 使用 require 引入 svg 文件

将所有 svg 文件都放到一个文件 SvgIcons.js 中，这里用到了 require ，使用的时候直接将对应的值赋值给 <img src="url" /> 即可。

线上 github 中的实例： https://github.com/KyleBing/diary/blob/master/src/assets/img/SvgIcons.js

export default {
    // LOGO
    logo: require('./logo/logo.svg'),
    logo_content: require('./logo/logo_content.svg'),
    logo_content_saved: require('./logo/logo_content_saved.svg'),
    logo_title: require('./logo/logo_title.svg'),
    logo_title_saved: require('./logo/logo_title_saved.svg'),

    logoIcon: {
        login: require('./logo/logo_login.svg'),
        register: require('./logo/logo_register.svg'),
        changePassword: require('./logo/logo_change_password.svg'),
        changeAvatar: require('./logo/logo_avatar.svg'),
    },
 }

 

这样做的好处是，可以静态的使用：

 <div class="logo-wrapper">
     <div :class="['logo', {valid: avatarLink} ]">
         <img :src="avatarLink || SvgIcons.logoIcon.login" alt="Diary Logo">
     </div>
 </div>

 

也可以动态的使用：

<template>
    <div class="weather-selector">
        <div class="weather" @click="chooseWeather(item.title)" v-for="item in weathers" :key="item.title">
            <img
                :src="weatherSelected === item.title? SvgIcons.weather[item.title + '_active'] :  SvgIcons.weather[item.title]"
                :alt="item.name"
                :title="item.name">
        </div>
    </div>
</template>

 

 

vue3 + ts + vite 直接使用 svg

vite 可以直接在 img 的 src 中引用 svg 文件作为源，但这种方法只适合死的图片，一点都不能 “动”，不能变化。不能动态的渲染，只是作为图片使用。

 <div class="logo-wrapper">
     <div :class="['logo', {valid: avatarLink} ]">
         <img v-if="avatarLink" :src="avatarLink" alt="Diary Logo">
         <img v-else src="../../assets/icons/logo/logo_login.svg" alt="">
     </div>
 </div>

 

vue3 + ts + vite： 使用 vite-svg-loader 载入 svg ，动态使用

1. 添加 vite-svg-loader

 

yarn add vite-svg-loader
# 或者
npm i vite-svg-loader

 

2. 在 vite.config.ts 中添加 svgLoader()

1. 打开 vite.config.ts 文件
2. 引入 svgLoader import svgLoader from "vite-svg-loader"
3. 在 plugins 字段中添加它，如下，跟 vue() 平级

 

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from "vite-svg-loader"
import { resolve } from 'path'


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        svgLoader()
    ]
}) 

 

在页面中引用svg

后面添加 ?url 才表示以 url 的方式引入，后面才能直接赋值给 img.src 属性，少了?url 是不行的。

import svgPick from "@/assets/visualTools/pick.svg?url";

 

 

<div>
　　<img :src="svgPick" alt="模型拾取">
</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

end