目錄
vite-plugin-svg-icons
首頁 web前端 Vue.js 深入淺析vue3+vite中怎麼使用svg圖標

深入淺析vue3+vite中怎麼使用svg圖標

Apr 28, 2022 am 10:48 AM
vue svg vue3 vite

svg圖片在專案中使用的非常廣泛,以下這篇文章帶大家介紹如何在vue3 vite 中使用svg圖標,希望對大家有所幫助!

深入淺析vue3+vite中怎麼使用svg圖標

vite-plugin-svg-icons

  • 預先載入 在專案執行時就產生所有圖示,只需操作一次dom
  • 高效能 內建快取,僅當檔案被修改時才會重新產生

(學習影片分享: vuejs教學

安裝

node version:  >=12.0 .0 vite version:  >=2.0.0

#
yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D
登入後複製

使用

  • vite .config.ts 中的設定外掛
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',

        /**
         * 自定义插入位置
         * @default: body-last
         */
        // inject?: 'body-last' | 'body-first'

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        // customDomId: '__svg__icons__dom__',
      }),
    ],
  }
}
登入後複製
  • 在src/main.js 內引入註冊腳本
import 'virtual:svg-icons-register'
登入後複製

##如何在元件中使用

  • 建立SvgIcon元件

/src/components/SvgIcon/index. vue

<template>
  <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
    <use :xlink:href="symbolId" :fill="props.color" />
  </svg>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: '#333'
  },
  size: {
    type: String,
    default: '1em'
  }
})

const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
登入後複製

  • icons目錄結構

  • #
    # src/icons
    
    - icon1.svg
    - icon2.svg
    - icon3.svg
    - dir/icon1.svg
    登入後複製
  • ##全域註冊元件

    # src/main.js
    
    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    
    import svgIcon from "@/components/SvgIcon/index.vue";
    import 'virtual:svg-icons-register'
    
    createApp(App)
        .use(ElementPlus)
        .use(router)
        .component('svg-icon', svgIcon)
        .mount('#app')
    登入後複製
  • 頁面使用

    <template>
        <svg-icon v-if="props.icon" :name="props.icon" />
        <span v-if="props.title" slot='title'>{{ props.title }}</span>
    </template>
    
    <script setup>
    
    const props = defineProps({
        icon: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        }
    })
    </script>
    登入後複製

取得所有SymbolId

import ids from 'virtual:svg-icons-names'
// => ['icon-icon1','icon-icon2','icon-icon3']
登入後複製
(學習影片分享:web前端開發

程式設計入門

以上是深入淺析vue3+vite中怎麼使用svg圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中echarts怎麼用 vue中echarts怎麼用 May 09, 2024 pm 04:24 PM

vue中echarts怎麼用

vue中的export default的作用 vue中的export default的作用 May 09, 2024 pm 06:48 PM

vue中的export default的作用

vue中map函數的用法 vue中map函數的用法 May 09, 2024 pm 06:54 PM

vue中map函數的用法

vue中event和$event區別 vue中event和$event區別 May 08, 2024 pm 04:42 PM

vue中event和$event區別

vue中export與export default區別 vue中export與export default區別 May 08, 2024 pm 05:27 PM

vue中export與export default區別

vue中onmounted作用 vue中onmounted作用 May 09, 2024 pm 02:51 PM

vue中onmounted作用

vue中的onmounted對應react哪個生命週期 vue中的onmounted對應react哪個生命週期 May 09, 2024 pm 01:42 PM

vue中的onmounted對應react哪個生命週期

vue中的鉤子是什麼 vue中的鉤子是什麼 May 09, 2024 pm 06:33 PM

vue中的鉤子是什麼

See all articles