大家好，又见面了，我是全栈君 删除黑色边框线导航栏 in viewDidload： [self.navigationController.navigationBar setBackgroundImage...UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = [[UIImage alloc] init]; 去掉搜索框的边界黑线...in viewDidload： [self.textSearchBar setBackgroundImage:[[UIImage alloc] init]]; 去掉搜索框的文本输入框的阴影 in...stroryboard： 选中搜索框——右边in attribute inspector——View 在Tint的颜色栏中选择 clear color 參考链接： http://stackoverflow.com
前言 在 Web 开发中，我们经常会用到 icon，icon 的使用经历了从图片到字体，再到 svg 的演变过程，也产生出相应的 icon 库，如雪碧图、Font Awesome、Iconfont 等等...工具 svg-sprite-loader svgo-loader svg-sprite-loader用来打包 svg 图标，svgo-loader 来精简我们的 svg 内容。...icon，需要用到 webpack 中的 require.context。...在 src/main.js 中引入所有的 svg 图标，之后可在文件夹自行添加或者删除图标，所以图标都会被自动导入，无需手动操作： import Vue from 'vue' import SvgIcon...大小 图标可从 iconfont 项目中下载或者由 UI 切图，同一个项目中使用的 Svg Icon 图标建议统一大小规格，比如 128*128。
前言 SVG（即“可缩放矢量图形”）图标在诸多场合下，往往胜过一般的位图标记（例如PNG、JPG、GIF等）。...应用广泛：除图标外，SVG亦常用于复杂的图表、插图、动画等。 然而，SVG并非在所有情形下皆为最佳选择。对于一些复杂度较高及色彩丰富的图像，例如照片，使用位图可能更为恰当。...important; display: inline-block; } 此乃一Vue组件，名为SvgIcon，其功能为展示SVG图标。...在计算属性iconName中，吾等将 iconClass 添以 #icon- 前缀，然后赋值于 SVG 的 use 元素的 xlink:href 属性。...组件 import SvgIcon from '@/components/SvgIcon' // 将 SvgIcon 组件注册为全局组件 Vue.component('svg-icon', SvgIcon
，只需要写这么一段代码即可： 但是这里有两个问题： 从图标库（比如阿里的 iconfont）下载下来的通常是...封装图标组件 在 components/common/icon 下新建一个 SvgIcon.vue 文件： <svg :fill="iconColor" class="svg-<em>icon</em>...全局注册组件 因为可能很多地方都会用到<em>图标</em>，这里选择全局注册 <em>SvgIcon</em>.vue 组件。...'@/components/common/<em>icon</em>/<em>SvgIcon</em>.vue' Vue.component('svg-<em>icon</em>', <em>SvgIcon</em>) // 让 icons/svg下面的图片自动导入，而不是每次手动导入...： .<em>icon</em> { color:#fff } svg path { fill:currentColor } 补充 iconfont 本身可以根据添加<em>的</em><em>图标</em>自动生成 js 代码，之后只需将
Vue 项目引入 SVG 图标 关于 SVG SVG 是一种可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。...SVG 与 icon font 的区别： icon font 是字体渲染，而 svg 是图形渲染，icon font 在一倍屏幕下渲染效果不好，细节部分锯齿明显 icon font 因为是字体只能支持单色...icon font 可读性不够好，icon font 主要在页面用 Unicode 符号调用对应的图标，对浏览器和搜索引擎不友好 安装依赖 在 vue 项目中引入 svg，首要工作是安装依赖包 svgo...from '@/components/SvgIcon' // svg组件 // register globally Vue.component('svg-icon', SvgIcon) const...模块）上下文，这个方法有 3 个参数： 要搜索的文件夹目录 是否还应该搜索它的子目录 以及一个匹配文件的正则表达式 创建一个通用的引入图标的 SvgIcon 组件如下： <svg
前面文章有讲到 svg 图标按需加载的优势以及 Vue 如何使用 vue-svg-icon 实现 svg 图标按需载入 今天来学习一下使用 svg-sprite-loader 在 Vue3 项目中实现图标按需加载...stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> 这里将 svg 图标中对应的图标颜色值改为字符串...currentColor，方便使用时控制图标实时颜色 将图标放在特定文件夹下，这里以 @/assets/svg 中导入的 svg 为例 2、安装 svg-sprite-loader npm i svg-sprite-loader...-[name]" }) .end(); } }; 4、新建 SvgIcon.vue 文件，这里可传入 name 属性控制图标类型，传入 size 属性控制图标大小，传入 color.../plugin"; createApp(App) .use(plugin, { imports: [] }) 7、图标组件的使用 <SvgIcon name="email" :size
为什么要使用 SVG 图标？ 在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多。...,内部雷要与use标签结合使用 xlink:href 执行用哪一个图标,属性值务必 #icon-图标名字 use标签fill 属性性可以设置图标的颜色（如何设置失败，检查你复制的这个 svg 图标代码中是否有这个...图标了，但是有一点不好的就是这样用起来有点麻烦，这个时候我们就可以进行ICON图标组件的封装了，并将其注册为一个全局的组件。...component / SvgIcon / index.vue 这里是组件的一个简单封装： <use :xlink...此时我们可以写一个自动注册的插件 component / index.ts /* * 注册整个项目的全局组件 */ import SvgIcon from '.
简述 VUE项目iconfont自定义SVG,在线或者离线下载的阿里巴巴icon font.js；并非SVG文件； 前情提示 VUE2； 在线或者离线下载的阿里巴巴icon font.js；并非SVG...部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤ 带有#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行 创建iconfont项目并配置...相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点： 支持多色图标了，不再受单色限制。...import '@/components/iconfont/web/iconfont.js' import svgIcon from '@/components/svgIcon' Vue.component...('svg-icon', svgIcon); 最终效果 其他 单个VUE组件中引入在线CDN 也可以全局在index.html全局引入。
原理 svg-sprite-loader 可以多个svg图标合并. 使用时只需根据合并的symbol的id即可....-- 接受外链形式的图片 --> <!...important; display: inline-block; } 上面用了一个判断是否是外连接的方法 isExternal,创建utils/validate.js /** *...:|mailto:|tel:)/.test(path) } 创建src/icons/index.js import Vue from 'vue'; //引入svgicon组件 import SvgIcon...from 'comps/SvgIcon' //全局注册 Vue.component('svg-icon', SvgIcon) // 加载所有图片 const req = require.context
我试着用下边的文案生成了一些icon，大家可以参考： 3.1 一款网络助手的logo 生成一个扁平风格的图标，该图标用途是作为一款网络助手程序的logo。背景色是“#7FA1F7”，圆角22.5%。...SvgIcon; 在上面的代码中，我们定义了一个SvgIcon组件，用于渲染SVG图标。...overflow: hidden; } 使用em作为icon的单位，是因为em是相对于当前对象内文本的字体尺寸的宽度单位，这样我们就可以通过设置fontSize的方式来调整icon的图标了。...); }; 在上面的代码中，我们使用了SvgIcon组件来渲染SVG图标，其中，name属性用于指定需要渲染的图标的名称。...由于我们全量引用了图标，会导致在所有页面，都会导入所有icon，原因是我们在svg-sprite.ts文件中做了自动化导入，我们亦可通过单行导入的方式来避免全量引入，我目前在思考有没有什么更好的方案解决该问题
正文开始... css加载图标 这是我们项目中最常用的一种方式 我在自己的iconfont[1]仓库中添加了几个图标 打开前阵子我开源的一个移动端项目topfreeApplication[2] 我们在...所以加入了一行代码,就将删除图标就加入我们的页面中了 svg图标 在这之前，我们都是用class方式加载，现在我们看下svg方式加载图标 在src/pages/home/component/Search.vue...组件中也看到我使用一个svg-icon的二次组件加载图标的 我把svg-icon注册成一个全局组件 <!...hidden; } src/components/index.ts import SvgIcon from '....渲染这整个标签，不然图标始终显示不出来） 所以你会发现在css中你用attr这个属性就可以动态的加载标签上的unicode了 css的Attr 在以上我们的图标用unicode就可以加载图标，同时我们也知道利用
，注意的是，我们使用的名字需要时这样的格式i-ep-name，例如 // 官方文档点击复制代码 // 需要修改为 <i-ep-plus...自定义图标 element-plus内置的图标有时候并不能完全满足我们的需求，我们还需要一些额外的自定义图标。...之后我们还需要创建一个icon组件components/SvgIcon/index.vue <svg aria-hidden="true" class="svg-<em>icon</em>" :.../components/SvgIcon/index.vue' import 'virtual:svg-icons-register' createApp(App).component('svg-icon...', SvgIcon) 之后我们就可以在页面中进行使用了 .menu-icon { font-size
', props: { // svg图标名称 name: { default: '', }, // 自定义样式 className: { type:...}, svgClass() { return ['svg-icon', this.className ?...currentColor; overflow: hidden;}全局注册该组件Vue.component('SvgIcon', SvgIcon);这样我们就可以通过 SvgIcon 访问内存中存在的...svg 图标了，我们还需要做的就是将 svg 文件加载到内存中， svg-sprite-loader 的官方解释是：一个用于创建 svg 雪碧图的 Webpack 加载器。.../svg', false, /\.svg$/);req.keys().map(req);这样就可以通过 name 属性访问 svg 了<SvgIcon name="404" className="icon-style
可以很容易分辨这个icon是什么。 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。 不过因为本质上还是使用的字体，所以多色图标还是不支持的。...svg图标时，不用再引入一遍图标svg了，因为我们做了自动化，icons/svg/下的svg后缀图标文件都可被自动引入 ...icons/index.js改进如下： import Vue from "vue"; import SvgIcon from "@/components/SvgIcon"; // icons图标自动加载.../svg", false, /\.svg$/); req.keys().map(req); // 全局注册svg-icon组件 Vue.component("svg-icon", SvgIcon);...icon-class="qq" class-name="qq-style"> 看，我们只用在icon-class中传入要使用的图标文件名就可以了，当然class-name
从无数的坑里摔倒又爬起，身经百战的我们今天来此来探讨一下，绘制一个供Web使用的SVG图形有哪些必备的注意点，以下我们以一个SVG icon为例： 首先，针对图标，我们需要“建立复合路径” 那么什么是复合路径呢...但是，很大部分的SVGicon，是不需要处理镂空的，这种情况下，大家是否依旧继续“建立复合路径”这个选项，就是个迷了.......[图片] 但是，“建立复合路径” 对一个优秀的SVGicon的编写，是很重要的！...我们来看下图的2段SVG代码的对比，很明显，使用了复合路径的SVG在相比之下，把所有图标内容都绘制在一个里了，即缩减了SVG的文件大小，同时，一个icon对应一个唯一路径的结构，大大提升了脚本操作的便利性...F.缩小和响应 缩小：压缩SVG代码，删除不必要的空格，来减小SVG图片体积。因为我们的Maxim工具上传时自动会做一次这样的压缩，所以在日常导出时不需要依靠AI的简易压缩了。
window = tk.Tk() window.title('抖音视频批量快删神器') window.config(bg='black', bd=1) # 设置窗口背景色为黑色，边框宽度为4 window.overrideredirect...，文本颜色为白色 title_label.pack(side='left', padx=10) # 添加最小化按钮的自定义图标 minimize_icon = Image.open('q.png')...# 替换为你的最小化按钮图标路径 minimize_icon = minimize_icon.resize((20, 20), Image.LANCZOS) minimize_photo = ImageTk.PhotoImage...(minimize_icon) # 添加最大化按钮的自定义图标 maximize_icon = Image.open('qq.png') # 替换为你的最大化按钮图标路径 maximize_icon...# 添加关闭按钮的自定义图标 close_icon = Image.open('qqq.png') # 替换为你的关闭按钮图标路径 close_icon = close_icon.resize((20
导航栏图标的不同状态 方法 方法1 需要UI设计师给出不同颜色的图标，在不同状态下设置不同的元素背景。 .icon { background-image: url(....注意：图标的增加了个和本身宽度一致的右侧透明边框，让阴影投射在边框上。...如果没有右侧边框，则元素完全处于不可见状态，drop-shadow不能生效（设想下，看不见的东西，自然没有投影） 优点：不需要额外的图标 缺点：需要两层DOM结构 方法4 background-blend-mode...（注意要求是黑色的图标）设置图片背景和颜色背景，然后按照lighten模式混合 lighten模式可以简单理解为：当背景叠加时，显示亮色。...本例子中，黑色的图标和其他颜色的背景色叠加，自然显示背景色 ? 优点：写法简洁 缺点：兼容性不好
3.1 type 有七种： default ：可以不写type属性，默认的样式。白色背景，文字黑色，鼠标悬停变边框和文字变为蓝色。 primary ：蓝色背景，文字白色。...dashed ：与default不同的是 边框为虚线 text：文本黑色，没有背景。 link：文本蓝色，没有背景。...这也就是图标的使用 图标的使用请看另一篇文章 SearchOutlined是搜索的图标 import { SearchOutlined } from '@ant-design/icons';...可以为Button添加icon属性或者在Button内部写入Icon(能控制图标的位置) }> <SearchOutlined...官网代码 4.1 点击 large、default、small 按钮变换所有按钮的大小 import { Button, Radio } from 'antd'; // 引入的图标 import {
在窗口内部也有自己的坐标系统，该坐标系统以客户区的左上角为原点，从左向右为x轴正方向，从上到下为y轴正方向，在客户区周围有标题栏和边框。 ?...从上图可以看出来，QWidget有两种常见的几何结构 不包含外面各种边框的几何结构(客户区)。 包含各种边框的几何结构。...#创造一个名为Icon的窗口类，继承自Qwidget class Icon(QWidget): def __init__(self,parent=None): super(Icon, self...(300,300,250,150) self.setWindowTitle('程序图标') #设置窗口图标，需要提供图标的路径 self.setWindowIcon(QIcon(...=Icon() icon.show() sys.exit(app.exec_()) 效果如下：实现了程序左上角图标的加载 ?
);QRCoder.QRCode qrcode = new QRCoder.QRCode(codeData);logoPath = IOHelper.MapPath(logoPath);Bitmap icon..., 15, 6, true);#region 参数介绍//GetGraphic方法参数介绍//pixelsPerModule //生成二维码图片的像素大小 ，我这里设置的是5//darkColor //...暗色 一般设置为Color.Black 黑色//lightColor //亮色 一般设置为Color.White 白色//icon //二维码 水印图标 例如：Bitmap icon = new Bitmap...(context.Server.MapPath("~/images/zs.png")); 默认为NULL ，加上这个二维码中间会显示一个图标//iconSizePercent //水印图标的大小比例 ，...可根据自己的喜好设置//iconBorderWidth // 水印图标的边框//drawQuietZones //静止区，位于二维码某一边的空白边界,用来阻止读者获取与正在浏览的二维码无关的信息 即是否绘画二维码的空白边框区域
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
