DEV中svg图标的使用

0、开始之前

先看看使用效果

在操作栏的使用:

在菜单中的使用

1、简述SVG图标

  • 中文名:可缩放矢量图形
  • 外文名:Scalable Vector Graphics
  • 外语缩写:SVG
  • 开发商:万维网联盟
  • 发行时间:1999年
  • 格    式:矢量图
  • 延伸至:可扩展标记语言
  • 类    型:图形格式

2、DEV中使用SVG图标

            this._btnSvgImageTest.ImageOptions.ImageToTextAlignment = DevExpress.XtraEditors.ImageAlignToText.LeftCenter;
            this._btnSvgImageTest.ImageOptions.SvgImage = global::SmartSolution.Apps.ABM.UI.Properties.Resources.newemployee;
            this._btnSvgImageTest.ImageOptions.SvgImageSize = new System.Drawing.Size(24, 24);

在DEV中svg图标都是附加于控件的ImageOptions之上,所以可以通过为ImageOptions添加扩展方法简化Svg图片的使用

    /// <summary>
    /// 图标管理
    /// </summary>
    public static class ImageOptionsExtends
    {

        /// <summary>
        /// 设置SVG图标
        /// </summary>
        public static ImageOptions SetSvgIcon(this ImageOptions options, SvgImage svg, int width = 16, int height = 16)
        {
            options.SvgImageSize = new Size(width, height);
            options.SvgImage = svg;
            return options;
        }
        /// <summary>
        ///
        /// </summary>
        /// <param name="options"></param>
        /// <param name="align"></param>
        /// <param name="indent"></param>
        public static SimpleButtonImageOptions SetSvgIconPosition(this SimpleButtonImageOptions options, ImageAlignToText align, int indent)
        {
            options.ImageToTextAlignment = ImageAlignToText.LeftCenter;
            options.ImageToTextIndent = 10;
            return options;
        }

    }

调用方法:

            _btnSvgImageTest.ImageOptions
                .SetSvgIconPosition(ImageAlignToText.LeftCenter, 10)
                .SetSvgIcon(Resources.newemployee, 24, 24);

3、相关资源(干货分享)

到哪里去找SVG图标?

当然是大明顶顶的http://iconfont.cn/

4、怎么编辑SVG图标

推荐自己部署SVG编辑器

也可以使用鄙人部署好的:https://huaisheng.wang/svgeditor/

5、关于DEV控件使用SVG总结

最大的优势,就是尺寸不限,文件很小,借助iconfont.cn和编辑工具,图标容易查找,颜色可定义

当然缺点也是有的:有些控件不支持svg图标,还有SVG图标渲染会耗费资源(可接受)


 文章作者:花生(OutMan)

发布地址:http://www.cnblogs.com/WangHuaiSheng/

发布时间:2017-12-02

本文版权归作者和博客园共有,欢迎转载,

但未经作者同意必须保留此段声明,

且在文章页面明显位置给出原文连接。

 

原文地址:https://www.cnblogs.com/WangHuaiSheng/p/8145882.html

时间: 2024-11-05 11:36:53

DEV中svg图标的使用的相关文章

Vue项目中svg图标不能正常显示

1.安装 svg-sprite-loader npm install svg-sprite-loader --save-dev 2.配置build文件夹中的webpack.base.conf.js 3.在src/components下新建文件夹及文件SvgIcon/index.vue 4.在src下新建icons文件夹,及icons文件夹下svg文件夹.index.js文件 5.在main.js中引入svg import '@/icons' 原文地址:https://www.cnblogs.co

如何在页面中使用svg图标

1.svg图标长啥样 注意:图标的宽高无所谓,使用时可以根据需求修改,fill后面是颜色的填充,可修改图标颜色. <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"> <path d="M941.248 352L672 82.752

Vue项目中使用svg图标

svg的图片有着颜色自定义大小自定义的优势.在阿里图标库可以下载svg图片. 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader 首先呢自然就是安装了 npm i svg-sprite-loader --save 创建svg文件目录/src/icons/svg 里面呢放置所有svg文件 还有/src/icons/index.js //index.js import Vue from 'vue' import SvgIcon f

vue中引入.svg图标,使用iconfont图标库

阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <

vue中,svg图标添加click事件,部分浏览器不生效

vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @click="addSubject(scope.$index)"> </icon> 后来发现,在edge内核中只有点击svg边缘部分才会触发click事件 所以解决办法如下:为svg图标外面包裹一层元素,click事件绑定在外侧元素上 <a href='javascri

替换 ionic 中的 图标

第一步,你把你的项目的SVG文件跟你自己做的图标的SVG文件都上到icomoon.io/app(上传方式上节已经讲过了,不会的翻下上节内容),会看到这么界面 第二步,点击下载后,出现这个页面,修改前缀,文件的名称 第三步,修改每个图标的名称,size值然后点击下载 我做的是安卓的APP所以修改的名字也是按照我自己的来的,你们也按照你们自己的来 第四步,下载下来的文件名字为icomoon压缩包,解压后应该是这样 第五步重点来了,要注意呀,在你的项目里面找到fonts,把你下载下来的fonts文件覆

Web中的图标

随着时代的变迁与技术的不断的更新,在当今这个时代,Web中的图标(Icons)不再仅仅是局限于<img>.除了<img>直接调用Icons文件之外,还有Sprites(俗称雪碧图).Icon Font(字体图标).SVG Icon等等.今天我们就来一起探讨一下这些方法在Web中实现Icon的利弊. 思考变革 设计师不管分辨率(Resolution independent)和设备平台,其追求像素完美(Pixel Perfection).体验一致性:而前端工程师们更为关心的是页面的可访

SVG图标在移动端的应用【转】

http://ued.ctrip.com/blog/svg-icons-in-mobile-applications.html 在移动设备 retina 屏幕 经常会遇到图标不清晰的问题. 为了解决这个问题,我们有以下几种方法 切一张 2倍甚至3倍大小的图,然后用css 进行缩放,这样虽然解决了图标不清晰的问题,但是容量也成倍增加,导致页面加载慢 ,hybird 包体积变大. 使用iconfont,无论你是什么分辨率,是否retina,无论你怎么放大,它可以保证图标不会出现任何模糊 ,一份字体文

SVG格式图片转成HTML中SVG的Path路径

AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击"文件(File)"-"另存为(Save As)",在弹出的对话框中保存类型选择SVG(*.svg). 2.svg文件保存后,用文本编辑器打开,找到<path>这一个节点,d属性里面就是这个图片的路径数据[注:在保存svg图标的时候需要使用路径查找器工具将图标制作为复合路径,不