Vue.js通過組件處理Icon圖標(biāo)
?Icon圖標(biāo)處理方案
記錄一次對于想使用element-plus之外的圖標(biāo),如何封裝成一個組件,是本次記錄的目標(biāo),希望在工作時能幫助自己處理圖標(biāo)問題。
分析,對于element-plus的圖標(biāo)可以通過el-icon來進行顯示,而自定義圖標(biāo)需要自定義一個圖標(biāo)組件,用來顯示自定義svg圖標(biāo)。
組件能力
- 顯示外部svg圖標(biāo)(外鏈)
- 顯示項目內(nèi)的svg圖標(biāo)
圖標(biāo)組件封裝思路
用于展示的圖標(biāo)組件
創(chuàng)建 components/SvgIcon/index.vue
:
<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> import { isExternal as external } from '@/utils/validate' import { defineProps, computed } from 'vue' const props = defineProps({ // icon圖標(biāo) icon: { type: String, required: true }, // 圖標(biāo)類名 className: { type: String, default: '' } }) /** * 判斷是否為外部圖標(biāo) */ const isExternal = computed(() => external(props.icon)) /** * 外部圖標(biāo)樣式 */ const styleExternalIcon = computed(() => ({ mask: `url(${props.icon}) no-repeat 50% 50%`, '-webkit-mask': `url(${props.icon}) no-repeat 50% 50%` })) /** * 項目內(nèi)圖標(biāo) */ const iconName = computed(() => `#icon-${props.icon}`) </script> ? <style lang='scss' 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> ?
判斷資源是否是外部資源
創(chuàng)建 utils/validate.js
:
/** * 判斷是否為外部資源 */ export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path) }
外部svg圖標(biāo)顯示
通過引入組件svg-icon,icon傳遞圖標(biāo)外鏈。
<span class="svg-container"> <svg-icon icon="https://xxx.svg"></svg-icon> </span>
處理項目內(nèi)svg圖標(biāo)
- 項目內(nèi)src目錄下創(chuàng)建 icons 文件夾,并導(dǎo)入svg圖標(biāo)文件
- 在 icons 下創(chuàng)建 index.js 文件
文件完成兩件事
- 導(dǎo)入所有的svg圖標(biāo)
- 完成SvgIcon的全局注冊
index.js 代碼如下
import SvgIcon from '@/components/SvgIcon' ? // 通過 require.context() 函數(shù)來創(chuàng)建自己的 context const svgRequire = require.context('./svg', false, /\.svg$/) // 此時返回一個 require 的函數(shù),可以接受一個 request 的參數(shù),用于 require 的導(dǎo)入。 // 該函數(shù)提供了三個屬性,可以通過 require.keys() 獲取到所有的 svg 圖標(biāo) // 遍歷圖標(biāo),把圖標(biāo)作為 request 傳入到 require 導(dǎo)入函數(shù)中,完成本地 svg 圖標(biāo)的導(dǎo)入 svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon)) ? export default app => { app.component('svg-icon', SvgIcon) }
全局注冊項目內(nèi)圖標(biāo)
main.js 中引入該文件
... // 導(dǎo)入 svgIcon import installIcons from '@/icons' ... installIcons(app) ...
使用內(nèi)部圖標(biāo)
// 用戶名 <svg-icon icon="user" /> // 密碼 <svg-icon icon="password" />
使用 svg-sprite-loader
處理 svg 圖標(biāo)
svg-sprite-loader
是webpack
中專門處理svg圖標(biāo)的一個loader
安裝: npm i --save-dev svg-sprite-loader@6.0.9
在vue.config.js
文件中配置loader
const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } ? module.exports = { chainWebpack(config) { // 設(shè)置 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() } }
這樣即可處理內(nèi)部的svg圖標(biāo)啦。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用el-upload實現(xiàn)文件上傳的實例代碼
這篇文章主要為大家詳細介紹了vue使用el-upload實現(xiàn)文件上傳,文中示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴們可以參考一下2024-01-01ant design vue嵌套表格及表格內(nèi)部編輯的用法說明
這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue實現(xiàn)同一個頁面可以有多個router-view的方法
今天小編就為大家分享一篇vue實現(xiàn)同一個頁面可以有多個router-view的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)
這篇文章主要介紹了Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的,本文通過實例代碼圖文詳解給大家講解的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11