使用SVG构建icon

制作Windows图标icon格式

icon文件就是讲多个尺寸图像整合到一个文件的压缩格式。

准备

依赖：

软件：ImageMagick
版本：7.1.0-portable-Q8-x64

注意后面几个新版本convert程序被合并到magick以命令的形式使用，为了兼容所以这里使用了老版本。

安装后设置环境变量为安装目录，注意提升一下排序，不然可能和windows自己的convert冲突

SVG转icon

使用convert命令抓换，输入为icon.svg文件，输出为多种尺寸合并一起的icon文件app.ico

convert -background none "icon.svg" -define icon:auto-resize="256,192,128,96,64,48,40,32,24,20,16" -compress zip "app.ico"

转换完成后，可以通过Icon Explorer软件查看文件中的图标

Icon Explorer 官网

直接将app.ico文件拖拽放入Icon Explorer就可以看见内部包含的多个尺寸的图像信息。

参考文献

[1]. stackoverflow . Converting GIF’s, PNG’s and JPG’s to .ICO files using Imagemagick . geekley . 2018.4.13
[2]. stackoverflow . How to make/get a multi size .ico file? . dlm . 2013.6.4

使用SVG构建icon相关推荐

利用svg添加icon
学习笔记今天一口气看了很多大佬关于icon的用法,unicode 和 font-class方式就不做记录了,转载一下大佬的文章手摸手带你优雅使用,icon里面有详细的关于icon发展史及使用方法. ...
react使用引入svg的icon；svg图形制作
由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...
【Vue3】Vue3+Vite前端在组件中直接使用svg图标icon(实现设计稿的icon解决方案)
webpack实现下载icon图标(svg格式) 用到的是腾讯codesign,其他平台也能进行svg图片的下载放入项目 svg中如何控制图标颜色如下图控制svg颜色的是fill参数,此处可以删 ...
react 使用 svg_在React本机中使用svg构建钟面
react 使用 svg In this article, we are going to look at how to draw a nice-looking analog clock face b ...
svg-icon的使用（将svg转换为icon来使用）
一.安装svg-sprite-loader npm install svg-sprite-loader --save 二.vue.config.js配置 chainWebpack: (config) ...
svg转icon图标方法
网址:icoMoon 在这里插入图片描述欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这 ...
Vue3中使用各类字体图标的正确姿势：本地SVG、Iconfont、FontAwesome、ElementPlus（Icon篇）
前言最近,在 BuildAdmin 项目的开发中,我们规划了一个 Icon 组件,我们希望通过这个组件,能直接同时使用多种图标库的图标(一种语法,实现无限的图标扩展和高度兼容性)并且,实现该 Ico ...
使用SVG中的Symbol元素制作Icon
前言随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来,我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果.我们都希望能在任何时间,任何设备上都能清楚的,高效的传递信息给 ...
php arcode svg,在react中使用svg的各种方法总结（附代码）
这篇文章给大家介绍的内容是关于在react中使用svg的各种方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 优势 SVG可被非常多的工具读取和修改(比如vscode ...
在react中使用svg的各种骚姿势
开头先抛个可供参考的项目ts-react-webpack4, 或脚手架steamer-react-ts 优势 SVG可被非常多的工具读取和修改(比如vscode) 不失真, 放大缩小图像都很清晰 SV ...

使用SVG构建icon

准备

SVG转icon

参考文献

使用SVG构建icon相关推荐

最新文章

热门文章