Icon圖示處理方案

記錄一次對於想使用element-plus之外的圖示，如何封裝成一個元件，是本次記錄的目標，希望在工作時能幫助自己處理圖示問題。

分析，對於element-plus的圖示可以通過el-icon來進行顯示，而自定義圖示需要自定義一個圖示元件，用來顯示自定義svg圖示。

元件能力

• 顯示外部svg圖示(外鏈)
• 顯示專案內的svg圖示

圖示元件封裝思路

用於展示的圖示元件

建立 components/SvgIcon/index.：

<template>
    <div
        v-if="isExternal"
        :style="styleExternalIcon"
        class="svg-external-icon svg-icon"
        :class="className"
    />
    <svg v-else class="svg-icon" :class="className" aria-hidden="true">
        <use :xlink:href="iconName" rel="external nofollow"  />
    </svg>
</template>
​
<script setup>
    imporwww.cppcns.com
 
t { isExternal as external } from '@/utils/validate'
    import { defineProps,computed } from 'vue'
    const props = defineProps({
        // icon圖示
        icon: {
            type: Strwww.cppcns.coming,required: true
        },// 圖示類名
        className: {
            type: String,default: ''
        }
    })
    /**
     * 判斷是否為外部圖示
     */
    const isExternal = computed(() => external(props.icon))
    /**
     * 外部圖示樣式
     */
    const styleExternalIcon = computed(() => ({
        mask: `url(${props.icon}) no
 
-repeat 50% 50%`,'-webkit-mask': `url(${props.icon}) no-repeat 50% 50%`
    }))
    /**
     * 專案內圖示
     */
    const iconName = computed(() => `#icon-${props.icon}`)
</script>
​
<style lang='s' scoped>
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
​
    .svg-external-icon {
        background-color: currentColor;
        mask-size: cover !important;
        display: inline-block;
    }
</style>
​

判斷資源是否是外部資源

建立 utils/validate.：

/**
 * 判斷是否為外部資源
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

外部svg圖示顯示

通過引入元件svg-icon，icon傳遞圖示外鏈。

<span class="svg-container">
    <svg-icon icon="https://xxx.svg"></svg-icon>
</span>

處理專案內svg圖示

• 專案內src目錄下建立 icons 資料夾,並匯入svg圖示檔案
• 在 icons 下建立 index.js 檔案

檔案完成兩件事

• 匯入所有的svg圖示
• 完成SvgIcon的全域性註冊

index.js 程式碼如下

參考文件依賴管理 | webpack 中文文件

import SvgIcon from '@/components/SvgIcon'
​
// 通過 require.context() 函式來建立自己的 context
const svgRequire = require.context('./svg',false,/\.svg$/)
// 此時返回一個 require 的函式，可以接受一個 request 的引數，用於 require 的匯入。
// 該函式提供了三個屬性，可以通過 require.keys() 獲取到所有的 svg 圖示
HslZtJogjH// 遍歷圖示，把圖示作為 request 傳入到 require 匯入函式中，完成本地 svg 圖示的匯入
svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))
​
export default app => {
 app.component('svg-icon',SvgIcon)
}

全域性註冊專案內圖示

main.js 中引入該檔案

...
// 匯入 svgIcon
import installIcons from '@/icons'
...
installIcons(app)
...

使用內部圖示

// 使用者名稱   
<svg-icon icon="user" />
// 密碼
<svg-icon icon="password" />

使用 svg-spHslZtJogjHrite-loader 處理 svg 圖示

svg-sprite-loader是webpack中專門處理svg圖示的一個loader

安裝： npm i --save-dev [email protected]

在vue.config.js 檔案中配置loader

const path = require('path')
function resolve(dir) {
 return path.join(__dirname,dir)
}
​
module.exports = {
 chainWebpack(config) {
   // 設定 svg-sprite-loader
   config.module
     .rule('svg')
     .exclude.add(resolve('src/icons'))
     .end()
   config.module
     .rule('icons')
     .test(/\.svg$/)
     .include.add(resolve('src/icons'))
     .end()
     .use('svg-sprite-loader')
     .loader('svg-sprite-loader')
     .options({
       symbolId: 'icon-[name]'
     })
     .end()
 }
}

這樣即可處理內部的svg圖示啦。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。