欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過程

 更新時(shí)間：2024年07月23日 09:47:19   作者：好多吃的啊  
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標(biāo)庫(kù)、自定義組件以及通過插件簡(jiǎn)化項(xiàng)目構(gòu)建過程,這篇文章給大家介紹了Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過程,需要的朋友可以參考下

vue3 + vite 使用 svg

1、安裝插件

npm install vite-plugin-svg-icons -D

npm install fast-glob -D

2、配置插件 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 引入svg插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

const pathResolve = (pathStr) => {
  return path.resolve(__dirname, pathStr)
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要緩存的svg圖標(biāo)文件夾，即需要識(shí)別的svg都應(yīng)該放在這個(gè)文件夾下
      // iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
      // 或
      iconDirs: [pathResolve('./src/assets')],
      // 指定symbolId格式（這里的配置與6.2步驟中的引入svg組件的name配置項(xiàng)寫法有關(guān)）
      symbolId: 'icon-[dir]-[name]',
    }),
  ],  
  resolve: {
    // 設(shè)置路徑別名
    alias: {
      '@': pathResolve('./src'),
    }
  },
})

3、根據(jù)vite配置的svg圖標(biāo)文件夾，建好文件夾，把svg圖標(biāo)放入

在這里插入圖片描述

4、在 src/main.js內(nèi)引入注冊(cè)腳本

import 'virtual:svg-icons-register'

在這里插入圖片描述

5、創(chuàng)建一個(gè)公共SvgIcon.vue組件

src/components/SvgIcon.vue

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

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'SvgIcon',
  props: {
    // 使用的svg圖標(biāo)名稱，也就是svg文件名
    name: {
      type: String,
      required: true,
    },
    prefix: {
      type: String,
      default: 'icon',
    }
  },
  setup(props) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
    return { symbolId }
  },
})
</script>
<style scope>
.svg-icon {
  width: 26px;
  height: 26px;
  fill: currentColor;
}
</style>

6、全局注冊(cè)SvgIcon.vue組件

在main.js中引入SvgIcon.vue組件，全局注冊(cè)后在需要使用SvgIcon組件的地方將無需再引入。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import 'virtual:svg-icons-register'

import SvgIcon from './components/SvgIcon.vue'


createApp(App).component('SvgIcon', SvgIcon).mount('#app')

7、在想要引入svg的vue組件中引入

已App.vue 示例

<template>
  
<!-- 使用不是在svgs目錄中嵌套文件夾下的svg圖標(biāo)的name寫法：寫上svg圖標(biāo)文件名即可 -->
  <SvgIcon class="delete-icon" name="home-fill"></SvgIcon>
  <!-- 使用是在svgs目錄中嵌套文件夾下的svg圖標(biāo)的name寫法：中劃線前面是文件夾名稱，后面是svg圖標(biāo)文件名稱 -->
  <!-- <SvgIcon class="edit-icon" name="msg-iconEdit"></SvgIcon> -->


</template>

<style lang="scss">
// 自定義svg顏色，寬高等樣式
// 注意：這里之所以能自定義svg顏色，是因?yàn)槲以?svg文件中把fill="xxx顏色值" 改為了fill="currentColor" (見下面第7步驟描述) 建議直接刪掉 fill
.delete-icon {color: pink;}
.delete-icon:hover{
  color: blue;
}
</style>

8、如果想要用color控制svg圖標(biāo)顏色，那么需要修改.svg文件中的fill屬性 建議直接刪掉 fill

在這里插入圖片描述

到此這篇關(guān)于Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過程的文章就介紹到這了,更多相關(guān)Vue3+vite使用svg內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論