打造属于自己的vue图标库

hfex-icon图标库

Install

npm i -D hfex-icon

主要提供2种使用方式

方式一

通过svg图标资源,借助unplugin-icons库将svg图标文件生成vue组件,然后通过vue组件的引入方式在vue中使用

unplugin-icons

兼容vue2和vue3

在vue.config.js的plugins中配置

Install unplugin-icons

npm i -D unplugin-icons

Webpack版本

const path = require('path')
const Icons = require('unplugin-icons/webpack');
const { FileSystemIconLoader } = require('unplugin-icons/loaders');
module.exports = {configureWebpack:{plugins:[Icons({compiler: vue2,//vue2或者vue3,看当前项目customCollections: {'hfex-icon': FileSystemIconLoader(path.join(process.cwd(), './node_modules/hfex-icon/icons'), svg =>svg.replace(/^<svg /, '<svg fill="currentColor" '))}})]}
}

Vite版本

import { defineConfig } from 'vite'
import Icons from 'unplugin-icons/vite'
import path from 'path'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
export default defineConfig({plugins:[Icons({compiler: vue3,//vue2或者vue3,看当前项目customCollections: {'hfex-icon': FileSystemIconLoader(path.join(process.cwd(), './node_modules/hfex-icon/icons'), svg => {return svg.replace(/^<svg /, '<svg fill="currentColor" ')})}
}),
]
})

也可以通过hfex-icon-plugin 配置,hfex-icon-plugin是将以上plugin上的配置封装起来

Use with hfex-icon-plugin

Install

npm i hfex-icon-plugin -D

Usage

vue+webpack

For example in Vue:

// vue.config.js
const HfexIconPlugin = require('hfex-icon-plugin/webpack')
module.exports = {configureWebpack:{plugins:[HfexIconPlugin()]}
}
vue+vite

For example in Vite:

// vite.config.ts
import HfexIconPlugin from 'hfex-icon-plugin';
export default defineConfig({plugins:[HfexIconPlugin()]
})

在vue入口文件引入注册组件

import HfexIcon from 'hfex-icon'
app.use(HfexIcon) //vue3
Vue.use(MfexIcon); //vue2

使用

<hfex-icon name="home" color="#999" size="80px"/>

效果展示

Image text

参数支持

参数类型默认值
namestringhome
sizestring28px
colorstring#000

方式二

配合unocss使用

Install unocss

npm install -D unocss

在vue入口文件引入

import 'uno.css'

在vue.config.js的plugins中配置

npm install -D @unocss/webpack
//vue.config.js
const UnoCSS = require('@unocss/webpack').default
const presetIcons = require('unocss').presetIcons
const presetUno = require('unocss').presetUno
const presetAttributify = require('unocss').presetAttributifymodule.exports = {configureWebpack:{plugins:[UnoCSS({presets: [presetUno(),presetAttributify(),presetIcons({collections: {'hfex-icon': () => require('hfex-icon/iconify-json/hfex-icon.json')}})]}),]}
}

vite中使用

//vite.config.ts
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
import Unocss from 'unocss/vite'
import { presetUno, presetAttributify, presetIcons } from 'unocss'export default defineConfig({plugins:[UnoCSS({presets: [presetUno(),presetAttributify(),presetIcons({collections: {'hfex-icon': () => require('hfex-icon/iconify-json/hfex-icon.json')}})]}),]
})

使用

<div class="i-hfex-icon:message w-80px h-80px bg-#cde6c7"></div>
<div class="i-hfex-icon:delete w-80px h-80px bg-#994405"></div>
<div class="i-hfex-icon:share w-80px h-80px bg-#cde6c7"></div>

效果展示

Image text

图标支持

Image text

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113757.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言】进阶——程序编译

目录 一&#xff1a;&#x1f512;程序环境 程序的翻译环境和执行环境 &#x1f4a1;1.1翻译环境 预编译阶段&#xff1a; 编译阶段&#xff1a; 汇编阶段&#xff1a; 链接阶段&#xff1a; &#x1f4a1;1.2运行环境 二&#xff1a;&#x1f512;预处理详解 &…

文件夹图片相似图片检测并删除相似图片

项目开源地址 pip install imagededupgit clone https://github.com/idealo/imagededup.git cd imagededup pip install "cython>0.29" python setup.py installQuick Start from imagededup.methods import PHash phasher PHash()# Generate encodings for all…

[Spring]为什么Spring动态代理默认使用CGlib,而不是JDK代理?

文章目录 原因一&#xff1a;CGlib不需要接口原因二&#xff1a;CGlib效率高原因三&#xff1a;JDK代理会导致注解失效如果希望使用JDK代理扩展AOP in Spring Boot, is it a JDK dynamic proxy or a Cglib dynamic proxy?SpringSpringBoot 原因一&#xff1a;CGlib不需要接口 …

[AUTOSAR][网络管理] 实战网络管理

文章目录 一、简介(1) 睡眠模式(2) 预睡眠模式(3) 网络模式① 重复报文状态② 常规操作状态③ 准备睡眠状态二、目录介绍三、实现方法(1)can_nm 网络管理硬件层网络管理参数代码实现思路(2)app_nm 网络网络业务层四、测试方法(1) 网络报文唤醒(2) 诊断报文唤醒五、示例…

分类预测 | Matlab实现WOA-BiLSTM鲸鱼算法优化双向长短期记忆神经网络的数据多输入分类预测

分类预测 | Matlab实现WOA-BiLSTM鲸鱼算法优化双向长短期记忆神经网络的数据多输入分类预测 目录 分类预测 | Matlab实现WOA-BiLSTM鲸鱼算法优化双向长短期记忆神经网络的数据多输入分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现WOA-BiLSTM鲸鱼算法…

力扣每日一题53:最大子数组和

题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,…

oracle-AWR报告生成方法

AWR报告生成方法 1. 以oracle用户登陆服务器 2. 进入到要保存awr报告的目录 3. 以sysdba身份连接数据库 sqlplus / as sysdba4. 执行生成AWR报告命令 ?/rdbms/admin/awrrpt.sql5. 选择AWR报告的文件格式 6. 选择生成多少天的AWR报告 7. 选择报告的快照起始和结束ID 8. 输入生…

MongoDB深度学习

MongoDB的简介 什么是MongoDB? MongoDB是一个基于分布式文件存储的数据库&#xff0c;由C语言编写。MongoDB是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的&#xff0c;它支持的数据结构非常松散&…

面试算法31:最近最少使用缓存

题目 请设计实现一个最近最少使用&#xff08;Least Recently Used&#xff0c;LRU&#xff09;缓存&#xff0c;要求如下两个操作的时间复杂度都是O&#xff08;1&#xff09;。 get&#xff08;key&#xff09;&#xff1a;如果缓存中存在键key&#xff0c;则返回它对应的值…

【二维差分】ICPC南京 A

https://codeforces.com/gym/104128/problem/A 题意 思路 二维差分经典模型 考虑如果没有洞那么经历操作之后会剩下什么样子的袋鼠。发现上下左右移动可以看成是边界在移动&#xff0c;边界一直保持一个原初的矩形形状&#xff0c;而且上下移动和左右移动没有任何关系。一旦…

【LeetCode刷题(数据结构与算法)】:将二叉搜索树转化为排序的双向链表

将一个 二叉搜索树 就地转化为一个 已排序的双向循环链表 对于双向循环列表&#xff0c;你可以将左右孩子指针作为双向循环链表的前驱和后继指针&#xff0c;第一个节点的前驱是最后一个节点&#xff0c;最后一个节点的后继是第一个节点 特别地&#xff0c;我们希望可以 就地 完…

LAXCUS分布式操作系统是怎么实现的?

一直有网友要求讲讲LAXCUS分布式操作系统是怎么实现的&#xff0c;其实LAXCUS分布式操作系统的设计研发&#xff0c;涉及各种基础技术和底层架构&#xff0c;研发过程很漫长&#xff0c;一直在坚持&#xff0c;实现过程也非常复杂&#xff0c;尤其重要的是要保证运行过程&#…

前端 TS 快速入门之二:接口

1. 接口有什么用 通过 interface 定义接口。 检测对象的属性&#xff0c;不会去检查属性的顺序&#xff0c;只要相应的属性存在并且类型也是对的就可以。 interface IPerson {name: string;age: number; } function say(person: IPerson): void {console.log(my name is ${pers…

Elasticsearch 8.9 Master节点处理请求源码

大家看可以看ElasticSearch源码&#xff1a;Rest请求与Master节点处理流程&#xff08;1&#xff09; 这个图非常好&#xff0c;下午的讲解代码在各个类和方法之间流转&#xff0c;都体现这个图上 一、Master节点处理请求的逻辑1、节点(数据节点)要和主节点进行通讯&#xff0…

C语言常量

常量的概念 常量&#xff1a; 在程序运行期间不可以该改变的量 作用&#xff1a; 用于记录程序中不可更改的数据 常量的五种表现形式 语法&#xff1a; 1、数值常量&#xff08;整数型常量&#xff08;整数&#xff09;、实数型常量&#xff08;小数&#xff09;&#xff09…

C++中的智能指针:更安全、更便利的内存管理

在C++编程中,动态内存管理一直是一个重要且具有挑战性的任务。传统的C++中,程序员需要手动分配和释放内存,这往往会导致内存泄漏和悬挂指针等严重问题。为了解决这些问题,C++11引入了智能指针(Smart Pointers)这一概念,它们是一种高级的内存管理工具,可以自动管理内存的…

【数据结构】线性表(四)双向链表的各种操作(插入、删除、查找、修改、遍历打印)

目录 线性表的定义及其基本操作&#xff08;顺序表插入、删除、查找、修改&#xff09; 四、线性表的链接存储结构 1. 单链表 2. 循环链表 3. 双向链表 a. 双向链表节点结构 b. 创建一个新的节点 c. 在链表末尾插入节点 d. 在指定位置插入节点 e. 删除指定位置的节点…

LeetCode 2172. 数组的最大与和【状压DP,记忆化搜索;最小费用最大流】2392

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

Juniper防火墙SSG-140 session 过高问题

1.SSG-140性能参数 2.问题截图 3.解决方法 &#xff08;1&#xff09;通过telnet 或 consol的方法登录到防火墙&#xff1b; &#xff08;2&#xff09;使用get session 查看总的session会话数&#xff0c;如果大于300 一般属于不正常情况 &#xff08;3&#xff09;使用get…

Python的编辑器VScode中文设置和Hello World

Python的编辑器 个人比较常用的用于Python开发的编辑器是VScode&#xff0c;大概的原因应该是免费&#xff0c;且便于项目文件的管理。 VScode中文设置插件及使用方法 VScode下载安装好之后&#xff0c;可以在软件左侧的“扩展”中搜索安装一些插件&#xff0c;用于辅助开发…