• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue.js通过组件处理Icon图标

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 Icon图标处理方案

记录一次对于想使用element-plus之外的图标,如何封装成一个组件,是本次记录的目标,希望在工作时能帮助自己处理图标问题。

分析,对于element-plus的图标可以通过el-icon来进行显示,而自定义图标需要自定义一个图标组件,用来显示自定义svg图标。

组件能力

  • 显示外部svg图标(外链)
  • 显示项目内的svg图标

图标组件封装思路

用于展示的图标组件

创建 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图标
        icon: {
            type: String,
            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='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>
​

判断资源是否是外部资源

创建 utils/validate.js

/**
 * 判断是否为外部资源
 */
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 图标
// 遍历图标,把图标作为 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-sprite-loader 处理 svg 图标

svg-sprite-loaderwebpack中专门处理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图标啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue中$attrs与$listeners的使用教程发布时间:2022-02-05
下一篇:
vue为自定义路径设置别名的方法发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap