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

 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 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) {
   // 设置 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使用自定义icon图标的方法

    首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家 效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 登录账号,找到需要的图标加入购物车 然后添加到项目 再然后下载代码到本地 下载代码文件然后解压出现这列表 打开HTML文件,引用方法教程 补充我人的坑,之前想着在style标签里@import "",结果一直报错,试了很多方法还是没效果,把问题想复杂了 第一步:在index.html引入f

  • vue element项目引入icon图标的方法

    为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建. 2.点击添加到项目后,选中第二个 3.点击更多操作里面的

  • Vue项目中如何引入icon图标

    1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角"IcoMoon App",找到自己需要的图标后选择然后点击右下角"Generate Font",接着可以在左上角第二个按钮"Preferences"进行自定义你要下载的图标信息,一般我都是进去改一下"Font Name",然后返回点击右下角"Do

  • Vue3使用icon的两种方式实例

    目录 1. 使用svg 2. 使用fontAwesome 3  来源 4 总结 技术栈和版本 Vite2 + Vue3 + fontAwesome5 Vue3 中使用Icon的方式,fontAwesome 简单好用,但有时候缺少想要的icon.采用svg的方式,想要什么,直接下载,然后使用,种类更加的全,基本上没有不符合需求的icon,但是没有fontAwesome 相对的容易轻松,每次都要下载对应的图片. 1. 使用svg a 下载需要使用的SVG图片,保存至 src/icons文件夹 b 安

  • vue 自定义icon图标的步骤

    ant-design-vue自定义使用阿里iconfont图标\ 第一步:从iconfont获取项目js链接 第二步 在需要引用iconfont的页面处加入 在Deom中使用: <a> <Fonts type='icon-zutaishitu'/> </a> import { Icon } from 'ant-design-vue'; const Fonts = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.co

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

     Icon图标处理方案 记录一次对于想使用element-plus之外的图标,如何封装成一个组件,是本次记录的目标,希望在工作时能帮助自己处理图标问题. 分析,对于element-plus的图标可以通过el-icon来进行显示,而自定义图标需要自定义一个图标组件,用来显示自定义svg图标. 组件能力 显示外部svg图标(外链) 显示项目内的svg图标 图标组件封装思路 用于展示的图标组件 创建 components/SvgIcon/index.vue: <template> <div v

  • Vue.js递归组件构建树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component> }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜

  • 用 Vue.js 递归组件实现可折叠的树形菜单(demo)

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component>` }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形

  • Vue.js函数式组件的全面了解

    目录 前言 React 函数式组件 Vue(2.x) 中的函数式组件

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • 关于vue.js弹窗组件的知识点总结

    首先在开发时需要考虑以下三点: 1.进入和弹出的动画效果. 2.z-index 的控制 3.overlay 遮盖层 关于动画 vue 对于动画的处理相对简单,给组件加入css transition 动画即可 <template> <div class="modal" transition="modal-scale"> <!--省略其它内容--> </div> </template> <script&g

  • Vue.js动态组件解析

    本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: 改变挂载的组件,

  • Vue.js中组件中的slot实例详解

    Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活

  • Vue.js划分组件的方法

    常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的框架,这样会显得效率很低,那么我们就单纯的看在Vue里面如何划分组件的. 总结下来有两种可以划分,两种划分的方法一种是页面上的功能块,select,pagenation,和一些需要大量代码去实现的一些部分,我们可以把它提取出来放到一起或者分类.还有一种根据页面区域来划分,header,footer,sidebar,有了组件之后Vue的组件是怎么实现的? Vue的组件是怎

  • 详解vue.js全局组件和局部组件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <my-component></my-compo

随机推荐