GoFly企业版里的阿里图标如何增加自定义图标到后台

news2024/11/16 10:46:26

1.在使用的vue页面引入图标组件

<script lang="ts" setup>
  import {Icon} from '@/components/Icon';
  </script>

2.在具体位置使用

<template>
     <Icon icon="svgfont-icon7" class="iconbtn" :size="18" color="#ed6f6f"></Icon>
  </template>

3.使用选择icon组件

import { IconPicker ,Icon} from '@/components/Icon';

在使用位置的组件,返回图标名称

<IconPicker @change="(icon)=>{formData.icon=icon}"></IconPicker>

4.使用 Arco Design 内置的图标

直接去 arco官网图标组件 找到相应的图标名称

5.使用阿里图标 

阿里iconfont 搭建自己图标库,新建项目需要注意如下:

(1)配置 FontClass/Symbol 前缀为:svgfont-

(2)配置 Font Family 为 iconfont

(3)将生成好的图标复制.js文件放到项目index.html文件<head>中

<script type="text/javascript" src="//at.alicdn.com/t/c/font_3931542_7lkjlll5u8q.js"></script>

6.参数说明

参数名

描述

类型

默认值

其他

icon

图标名称

string

--

size

大小

number

18

spin

是否旋转

bool

false

color

颜色

string

prefix

前缀

string

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

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

相关文章

如何进行 AWS 云监控

什么是 AWS&#xff1f; Amazon Web Services&#xff08;AWS&#xff09;是 Amazon 提供的一个全面、广泛使用的云计算平台。它提供广泛的云服务&#xff0c;包括计算能力、存储选项、网络功能、数据库、分析、机器学习、人工智能、物联网和安全。 使用 AWS 有哪些好处&…

华为云全栈可观测平台(APM)8月新功能特性

华为云应用性能管理服务&#xff08;Application Performance Management&#xff0c;简称APM&#xff09;帮助运维人员快速发现应用的性能瓶颈&#xff0c;以及故障根源的快速定位&#xff0c;为用户体验保驾护航。 您无需修改代码&#xff0c;只需为应用安装一个APM Agent&a…

Linux/Ubuntu服务器 screen 安装与使用

一、screen简单介绍 在Linux系统中&#xff0c;screen是一个非常强大的终端仿真器&#xff0c;它允许用户在一个终端窗口中创建多个子窗口&#xff0c;每个子窗口都可以运行一个独立的会话。screen的主要特点包括&#xff1a; 会话分离&#xff1a;screen允许用户在终端会话中运…

lottie-web动画库实战详解

安装 npm install lottie-web pnpm install lottie-web yarn add lottie-web <divid"animation"style"width: 700px; height: 440px; margin-top: 80px"></div>import lottie from "lottie-web"; import loginJson from ".…

大零售时代:开源 AI 智能名片、2+1 链动与 O2O 商城小程序引领融合新趋势

摘要&#xff1a;本文深入探讨了当今零售业态的发展趋势&#xff0c;指出在数据匹配的时代&#xff0c;人依然在零售中发挥着重要作用。通过对大零售理念的阐述&#xff0c;分析了跨行业跨业态融合的必然性&#xff0c;强调了业态融合的指导思想以及实现方式。同时&#xff0c;…

管理非人类身份的隐形风险

在网络安全的动态世界中&#xff0c;身份和访问管理 (IAM) 是关键的基础。确保只有授权的个人和系统才能访问公司资源至关重要。 不幸的是&#xff0c;虽然许多组织擅长管理人类身份&#xff0c;但他们通常需要更多地关注不断增长且可能更具危险的数字参与者类别&#xff0c;即…

LIN总线CAPL函数—— LIN报文响应空间长度测试

&#x1f345; 我是蚂蚁小兵&#xff0c;专注于车载诊断领域&#xff0c;尤其擅长于对CANoe工具的使用&#x1f345; 寻找组织 &#xff0c;答疑解惑&#xff0c;摸鱼聊天&#xff0c;博客源码&#xff0c;点击加入&#x1f449;【相亲相爱一家人】&#x1f345; 玩转CANoe&…

社交媒体必备,2024年免费视频编辑软件助力内容创作

平常生活放松的时候你是不是通过一些短视频来放松情绪。我身边很多人都是看着看着也想分享自己的生活。这次我们来聊一聊抖音剪辑可以用到哪些工具。 1.福昕视频剪辑 连接直达>>https://www.pdf365.cn/foxit-clip/ 这款视频剪辑软件凭借其低门槛的设计理念&#xff0c…

div3 970

Problem - D - Codeforces 关键在于如果是环的话&#xff0c;环中的每一个的值都是一样的 #include<bits/stdc.h> #define int long long using namespace std; signed main(){int nn;cin>>nn;while(nn--){int n;cin>>n;int a[n1],i0;while(i<n)cin>…

电路分析 ---- 电平移位电路

1 电平移位电路 如图所示的电平移位电路&#xff0c;用于ADC的前级驱动&#xff0c;它将一个变化范围为-10V ~ 10V的输入信号&#xff0c;线性变化成0.048V ~ 4.048V的信号&#xff0c;以满足ADC的输入范围要求。 2 电路说明 V R E F V_{REF} VREF​为电压基准源&#xff0c…

假期学习----iOS多线程

iOS多线程 https://juejin.cn/post/6844903566398717960 什么是GCD Grand Central Dispatch&#xff08;GCD&#xff09; 是 Apple 开发的一个多核编程的较新的解决方法。它主要用于优化应用程序以支持多核处理器以及其他对称多处理系统。 GCD的用处&#xff1a; GCD 可用…

mac安装spark

参考&#xff1a;在Mac上安装Spark apache-spark-3.5.1_mac安装spark-CSDN博客 几个需要用到的路径&#xff1a; hadoop的bin目录&#xff1a;/opt/homebrew/Cellar/hadoop/3.4.0/bin spark的conf目录/opt/homebrew/Cellar/apache-spark/3.5.2/libexec/conf spark的bin目录&am…

一般位置下的3D齐次旋转矩阵

下面的矩阵虽然复杂&#xff0c;但它的逆矩阵求起来非常简单&#xff0c;只需要在 sin ⁡ θ \sin\theta sinθ 前面加个负号就是原来矩阵的逆矩阵。 如果编程序是可以直接拿来用的&#xff0c;相比其它获取一般旋转轴不经过原点的三维旋转矩阵的途径或算法&#xff0c;应该能…

ArmSoM CM5 RK3576核心板推出,强势替代树莓派CM4

ArmSoM团队隆重推出全新的CM5 RK3576核心板&#xff0c;这款模块专为嵌入式开发者设计&#xff0c;凭借其强大的性能与丰富的扩展性&#xff0c;完美替代树莓派CM4&#xff0c;成为开发者们的理想选择。 CM5核心板采用了先进的RK3576 SoC&#xff0c;凭借卓越的计算能力和出色…

Java使用Selenium进行Web项目的UI自动化测试

目录 配置Selenium 1.使用Maven管理依赖 将三个依赖放到java的pom文件中 2.这里使用Edge进行简单的UI操作 3.提醒 FireFox和Chrome启动失败 Firefoxdriver启动失败 Chromedriver启动失败 java如何使用Selenium进行web的UI自动化测试 对一个项目进行测试目录详情…

Python作为客户端连接websocket

缘起 因为需要将MQTT中的数据推送给前端,但是前端不会直接连接MQTT,所以服务端做了一个中间层,通过websocket推送,但是在开发的过程中前端总是认为推送的数据不及时,所以这里又实用Python单独做了一个客户端做时间记录验证。开始吧 安装三方包 Python的生态很方便,这里…

oracle数据块内部结构详解

文章目录 Oracle数据块详解概述Oracle块具有以下特点&#xff1a;① 最小的I/O单元&#xff1b;② 包含一个或多个OS块&#xff1b;③ 大小由参数DB_BLOCK_SIZE决定&#xff1b;④ 数据库创建时设置&#xff0c;数据库创建后不能更改 Oracle数据块详解 概述 操作系统块是…

2024 第七届“巅峰极客”网络安全技能挑战赛初赛 Web方向 题解WirteUp

EncirclingGame 题目描述&#xff1a;A simple game, enjoy it and get the flag when you complete it. 开题&#xff0c;前端小游戏&#xff0c;红点出不去就行 直接玩通关了 看看如何不玩也能拿到flag&#xff0c;flag存储在后端php文件内&#xff0c;前端找不到。 看一下…

前端工程化之【模块化规范】

目录 模块化概述&#xff1a;什么是模块化为什么需要模块化 有哪些模块化规范导入与导出的概念CommonJS 规范ES6 官方模块化规范导出数据导入数据Node 中运行 ES6 模块 模块化概述&#xff1a; 什么是模块化 ● 将程序文件依据一定规则拆分成多个文件&#xff0c;这种编码方式…

区块链的含义是什么

目录 区块链的基本定义 区块链的构成与特性 区块链的类型 区块链的应用 区块链的基本定义 区块链是一种分布式数据存储、点对点传输、共识机制和加密算法等计算机技术的新型应用模式。它通过将数据区块按照时间顺序相连形成链式结构&#xff0c;确保数据的真实性和不可篡改…