CN115328353A - 一种生成iconfont资源的方法、装置以及介质 - Google Patents
一种生成iconfont资源的方法、装置以及介质 Download PDFInfo
- Publication number
- CN115328353A CN115328353A CN202210967896.5A CN202210967896A CN115328353A CN 115328353 A CN115328353 A CN 115328353A CN 202210967896 A CN202210967896 A CN 202210967896A CN 115328353 A CN115328353 A CN 115328353A
- Authority
- CN
- China
- Prior art keywords
- iconfont
- svg
- file
- template
- resource
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 69
- 238000004458 analytical method Methods 0.000 claims description 23
- 238000005516 engineering process Methods 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 12
- 238000009877 rendering Methods 0.000 claims description 6
- 230000008569 process Effects 0.000 description 8
- 238000010586 diagram Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 4
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 3
- 230000009471 action Effects 0.000 description 3
- 238000010276 construction Methods 0.000 description 3
- 238000012423 maintenance Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 239000003086 colorant Substances 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000013473 artificial intelligence Methods 0.000 description 1
- 238000013523 data management Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000001052 transient effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/35—Creation or generation of source code model driven
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
本申请公开了一种生成iconfont资源的方法、装置以及介质，应用于信息技术领域。该方法收集保存好的svg图片，然后编译svg图片生成.svg文件以及iconfont资源中的字体文件，通过解析.svg文件得到解析数据，最后以解析数据为驱动，加载预定义的iconfont模板以生成其他iconfont资源。至此，就得到了iconfont.css、iconfont.js、示例文件、以及字体文件等完整的iconfont资源。在生成iconfont资源时，不需要把产品相关的svg图片上传至第三方服务器，产品的图标数据不会存放在第三方，则不存在泄密风险，即在生成iconfont资源的同时防止了数据泄露。
Description
技术领域
本申请涉及信息技术领域，特别是涉及一种生成iconfont资源的方法、装置以及介质。
背景技术
字体图标iconfont即以字体的方式来显示图标，是一种通过矢量图代替网页中传统小图标的技术，具有灵活、轻便、高保真的特性。随着信息技术的不断发展，iconfont在互联网应用中的使用越来越广泛，不同于传统图片，iconfont作为图标可以随意修改颜色、尺寸，并且不会失真、模糊，而且体积要远远小于传统图片，正是它的灵活、轻量、高保真等特性，让这项技术备受互联网行业青睐。但目前没有可以直接生成iconfont资源的技术方案，多数公司使用iconfont资源时不得不依赖某些大厂的线上平台，如国内的阿里矢量图库、国外的iconfont等(以下统称为第三方平台)，都为我们提供了便捷的生成iconfont资源的功能入口，我们只需将符合规则的svg(Scalable Vector Graphics)图片上传至第三方平台即可生成需要的iconfont资源。
这种平台虽然能很轻松的满足大家的需求，但也存在一些问题，目前生成自己iconfont资源时，必须把产品相关的svg图片上传至第三方服务器，这样一来产品的图标数据存放在第三方，存在泄密风险。
由此可见，如何在生成iconfont资源的同时防止数据泄露，是本领域技术人员亟待解决的问题。
发明内容
本申请的目的是提供一种生成iconfont资源的方法、装置以及介质，以在生成iconfont资源的同时防止数据泄露。
为解决上述技术问题，本申请提供一种生成iconfont资源的方法，包括：
收集设计完成的svg图片；
编译所述svg图片生成字体文件和.svg文件；
解析所述.svg文件得到解析数据；
以所述解析数据为驱动，加载预定义的iconfont模板以生成其他所述iconfont资源；其中，所述iconfont资源包括iconfont.css、iconfont.js、示例文件、以及所述字体文件。
优选地，所述编译所述svg图片生成字体文件和.svg文件包括：
通过webpack技术对所述svg图片进行编译以生成所述字体文件和所述.svg文件。
优选地，所述解析.svg文件得到解析数据包括：
通过node将所述.svg文件转换为字符串；
解析所述字符串中各所述svg图片的名称、unicode值、svg绘图代码得到所述解析数据。
优选地，所述以所述解析数据为驱动，加载预定义的iconfont模板以生成其他所述iconfont资源包括：
根据所述解析数据中所述svg图片的名称确定iconfont的图标类型；其中，所述图标类型包括单色图标和多色图标；
根据所述图标类型选择对应的所述iconfont模板；
加载所述iconfont模板以生成其他所述iconfont资源。
优选地，所述根据所述图标类型选择对应的所述iconfont模板包括：
若所述iconfont的所述图标类型为单色图标，则选择预定义的css模板；
若所述iconfont的所述图标类型为多色图标，则选择预定义的Js模板。
优选地，所述加载所述iconfont模板以生成其他所述iconfont资源包括：
若所述iconfont模板为所述css模板，则通过所述css模板将所述解析数据逐一通过css伪类的形式编码到所述css模板中生成所述iconfont.css；
若所述iconfont模板为所述Js模板，则通过所述Js模板将所述解析数据逐一通过symbol+svg的形式编码到所述Js模板中生成所述iconfont.js；
基于所述node拼装html文件，将所述iconfont.css和/或所述iconfont.js注入到所述html文件中，并将所有的图标按照固定格式渲染到所述html文件中得到所述iconfont的所述示例文件。
优选地，所述svg图片以及所述iconfont资源保存在文件目录或数据库中。
为解决上述技术问题，本申请还提供一种生成iconfont资源的装置，包括：
收集模块，用于收集设计完成的svg图片；
编译模块，用于编译所述svg图片生成字体文件和.svg文件；
解析模块，用于解析所述.svg文件得到解析数据；
加载模块，用于以所述解析数据为驱动，加载预定义的iconfont模板以生成其他所述iconfont资源；其中，所述iconfont资源包括iconfont.css、iconfont.js、示例文件、以及所述字体文件。
为解决上述技术问题，本申请还提供一种生成iconfont资源的装置，包括：存储器，用于存储计算机程序；
处理器，用于执行计算机程序时实现上述生成iconfont资源的方法的步骤。
为解决上述技术问题，本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述生成iconfont资源的方法的步骤。
本申请所提供的生成iconfont资源的方法，在设计人员将svg图片设计完成之后，收集保存好的svg图片，然后编译svg图片生成.svg文件以及iconfont资源中的字体文件，通过解析.svg文件得到解析数据，最后以解析数据为驱动，加载预定义的iconfont模板以生成其他iconfont资源。至此，就得到了iconfont.css、iconfont.js、示例文件、以及字体文件等完整的iconfont资源。本申请提供的方法，在生成iconfont资源时，不需要把产品相关的svg图片上传至第三方服务器，产品的图标数据不会存放在第三方，则不存在泄密风险，即在生成iconfont资源的同时防止了数据泄露。即整个流程与线上服务完全脱钩，既能确保产品应用中可以使用表现更丰富，体验更友好，执行更安全，维护更方便，复用更简单的Iconfont图标，又能降低自身对第三方服务的依赖，提升数据的保密性、产品的稳定性。
本申请还提供了一种生成iconfont资源的装置和计算机可读存储介质，与上述方法对应，故具有与上述方法相同的有益效果。
附图说明
为了更清楚地说明本申请实施例，下面将对实施例中所需要使用的附图做简单的介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的一种生成iconfont资源的方法的流程图；
图2为本申请实施例提供的一种生成iconfont资源的设备结构图；
图3为本申请实施例提供的生成iconfont资源的装置的结构图；
图4为本申请另一实施例提供的生成iconfont资源的装置的结构图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下，所获得的所有其他实施例，都属于本申请保护范围。
本申请的核心是提供一种生成iconfont资源的方法、装置以及介质，以在生成iconfont资源的同时防止数据泄露。
为了使本技术领域的人员更好地理解本申请方案，下面结合附图和具体实施方式对本申请作进一步的详细说明。
目前在生成iconfont资源时必须把产品相关的svg图片上传至第三方服务器，而产品的图标数据存放在第三方存在泄密风险，且第三方服务器出现维护时，会影响用户自身产品的研发、生产，为自身发展带来不稳定因素。针对上述问题，本申请实施例提出一种基于Node+Webpack生成字体图标的方案。本方案基于webpack技术对产品的svg图片进行批量编译，生成字体文件和一个.svg文件；然后通过node解析.svg文件，并根据预定义的iconfont模板，生成兼容单色图标、多色图标的iconfont资源，最终实现产品对iconfont的应用。本方案完全脱离线上服务，在本地根据自己的svg图片生成自己iconfont，应用到自己产品中，既能实现iconfont的灵活性、轻便性、高保真，又能保证自身图标的兼容性、数据的安全性、产品的稳定性。图1为本申请实施例提供的一种生成iconfont资源的方法的流程图；如图1所示，该方法包括如下步骤：
S10：收集设计完成的svg图片。
图2为本申请实施例提供的一种生成iconfont资源的设备结构图；如图2所示，包括svg图片收集器1、.svg文件解析器2、iconfont构造器3、寄存器4、iconfont载入器5；iconfont构造器3中包括单色图标构造单元和多色图标构造单元。svg图片收集器1负责收集和存放产品的svg图片，供webpack技术对图片进行批量编译。因为本设备是脱离线上服务在本地使用，所以收集图片可采用直接将图片放入文件目录的方式，完成采集和存储；另外还可通过可视化表单上传图片的方式，将上传的图片以文件流行形式存放在数据库，能使数据更安全。
S11：编译svg图片生成字体文件和.svg文件。
然后使用webpack技术对存储的svg图片进行批量编译，产出iconfont的字体文件和.svg文件，将.svg文件上传给.svg文件解析器2。webpack是代码编译工具，有入口、出口、loader和插件，常用于现代JavaScript应用程序的静态模块打包。.svg文件解析器2会将webpcak产出的字体文件直接存入寄存器4。
S12：解析.svg文件得到解析数据。
.svg文件解析器2基于webpack产出的.svg文件，通过node得到解析数据，具体过程如下：使用node加载.svg文件，转换其内容为字符串，然后解析字符串中各svg图片的名称、unicode值、svg绘图代码等，并逐一装入对象，最终以JSON格式上送JSON数据(解析数据)给iconfont构造器3。其中，node即node.js，是一个基于Chrome V8引擎的JavaScript运行时，简单的说node就是运行在服务端的JavaScript。
S13：以解析数据为驱动，加载预定义的iconfont模板以生成其他iconfont资源。
其中，iconfont资源包括iconfont.css、iconfont.js、示例文件、以及字体文件，使用webpack技术对存储的svg图片进行批量编译产出了iconfont的字体文件，这里iconfont构造器3用于生成其他其他iconfont资源，包括iconfont.css、iconfont.js、以及示例文件。iconfont构造器3通过node加载预定义的iconfont模板，遍历接收到的JSON数据，根据svg图片的名称判断图标类型为单色图标还是多色图标(如icon-message为单色，icon-message-colours为多色)，然后根据图标类型选择对应的模板生成iconfont资源。iconfont构造器3中包括单色图标构造单元和多色图标构造单元，iconfont构造器3的单色图标构造单元通过node加载预定义的css模板，将遍历出的单色图片数据，逐一通过css伪类的形式，编码到模板文件中以生成资源文件iconfont.css，其中，图片名即为css样式名，unicode编码即为伪类content的值。iconfont构造器3的多色图标构造单元通过node加载预定义的Js模板，将遍历出的多色图片数据，逐一通过symbol+svg的形式，编码到模板文件中以生成资源文件iconfont.js，其中，图片名即为symbol的Id值，path即为symbol中svg的path属性值。然后，基于node拼装超文本标记语言(Hyper Text Markup Language，html)文件，并将生成的资源文件注入到此html文件中，遍历JSON数据，将所有的图标按照固定格式渲染到html文件中，此文件即为Iconfont的示例文件(index.html)，以便于查看图标效果。最终，将由node自动编辑完成的iconfont.css、iconfont.js、示例文件存入寄存器4中。其中，css是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言；Js即Javascript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。svg是一种图形文件格式，为可缩放的矢量图形；JSON是一种轻量级的数据交换格式。
寄存器4负责存放iconfont构造器3生成的iconfont资源文件和.svg文件解析器2上送来的字体文件。其存放方式与svg图片收集器1类似，可以存放于后台数据库，也可以直接存放在文件目录中。iconfont载入器5通过node抓取应用的入口文件，如项目的main.js、index.html等，然后将寄存器4中存放的iconfont.css和iconfont.js分别通过link和scprit注入到应用中。至此本设备基于Node+Webpack技术,利用svg图片离线生成iconfont资源，完成产品项目的应用过程。需要注意的是，图2所示的结构只是本申请实施例的其中一种方案，并不对本申请的其他方案造成限定，图2的基本思想如下：svg图片收集器1负责收集、存放已设计完成的svg图片，供webpack技术对图片进行批量编译，并将产出的字体文件和.svg文件上送给.svg文件解析器。然后.svg文件解析器2负责接收webpack产出的.svg文件，并通过node对其进行解析，把解析生成的解析数据上送给iconfont构造器3，另外把字体文件直接存入寄存器4。iconfont构造器3负责通过node加载iconfont模板，以接收到的数据为驱动自动编写css\js文件以生成iconfont资源。寄存器4用于存放iconfont构造器3生成的iconfont资源和基于webpack产出的字体文件。iconfont载入器5负责通过node往产品的入口文件中注入iIconfont资源。即本申请实施例基于webpack技术对收集完成的svg图片进行批量编译，生成字体文件和.svg文件；再通过node解析.svg文件，获取所有图标的JSON数据，根据预定义的iconfont模板，生成兼容单色、多色图标的iconfont资源，最后通过node注入到产品应用中。
本申请实施例所提供的生成iconfont资源的方法，在设计人员将svg图片设计完成之后，收集保存好的svg图片，然后编译svg图片生成.svg文件以及iconfont资源中的字体文件，通过解析.svg文件得到解析数据，最后以解析数据为驱动，加载预定义的iconfont模板以生成其他iconfont资源。至此，就得到了iconfont.css、iconfont.js、示例文件、以及字体文件等完整的iconfont资源。本申请实施例提供的方法，在生成iconfont资源时，不需要把产品相关的svg图片上传至第三方服务器，产品的图标数据不会存放在第三方，则不存在泄密风险，即在生成iconfont资源的同时防止了数据泄露。即整个流程与线上服务完全脱钩，既能确保产品应用中可以使用表现更丰富，体验更友好，执行更安全，维护更方便，复用更简单的Iconfont图标，又能降低自身对第三方服务的依赖，提升数据的保密性、产品的稳定性。
上述实施例中并未限定如何编译svg图片生成字体文件和.svg文件，本实施例提供一种具体的方案，包括：通过webpack技术对svg图片进行编译以生成字体文件和.svg文件。svg是一种图形文件格式，意思为可缩放的矢量图形，它是基于可扩展标记语言(Extensible Markup Language，XML)，由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可设计高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到html中通过浏览器来观看。webpack是代码编译工具，有入口、出口、loader和插件，是一个用于现代JavaScript应用程序的静态模块打包工具，当webpack处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。
上述实施例未限定如何解析.svg文件得到解析数据，本实施例提供一种具体方案，包括：通过node将.svg文件转换为字符串；解析字符串中各svg图片的名称、unicode值、svg绘图代码得到解析数据。node即node.js，是一个基于Chrome V8引擎的JavaScript运行时，简单的说node就是运行在服务端的JavaScript。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。
上述实施例中提到，iconfont资源包括iconfont.css、iconfont.js、示例文件、以及字体文件，其中，字体文件已通过编译svg图片生成，本实施例说明如何生成iconfont.css、iconfont.js、以及示例文件。具体的，以解析数据为驱动，加载预定义的iconfont模板以生成其他iconfont资源包括：根据解析数据中svg图片的名称确定iconfont的图标类型；其中，图标类型包括单色图标和多色图标；根据图标类型选择对应的iconfont模板；加载iconfont模板以生成其他iconfont资源。其中，根据图标类型选择对应的iconfont模板包括：若iconfont的图标类型为单色图标，则选择预定义的css模板；若iconfont的图标类型为多色图标，则选择预定义的Js模板。而加载iconfont模板以生成其他iconfont资源包括：若iconfont模板为css模板，则通过css模板将解析数据逐一通过css伪类的形式编码到css模板中生成iconfont.css；若iconfont模板为Js模板，则通过Js模板将解析数据逐一通过symbol+svg的形式编码到Js模板中生成iconfont.js；基于node拼装html文件，将iconfont.css和/或iconfont.js注入到html文件中，并将所有的图标按照固定格式渲染到html文件中得到iconfont的示例文件。
实现上述过程的设备可以是图2中的iconfont构造器3，iconfont构造器3通过node加载预定义的iconfont模板，遍历接收到的JSON数据，根据svg图片的名称判断图标类型为单色图标还是多色图标(如icon-message为单色，icon-message-colours为多色)，然后根据图标类型选择对应的模板生成iconfont资源。iconfont构造器3的单色图标构造单元通过node加载预定义的css模板，将遍历出的单色图片数据，逐一通过css伪类的形式，编码到模板文件中以生成资源文件iconfont.css，其中，图片名即为css样式名，unicode编码即为伪类content的值。iconfont构造器3的多色图标构造单元通过node加载预定义的Js模板，将遍历出的多色图片数据，逐一通过symbol+svg的形式，编码到模板文件中以生成资源文件iconfont.js，其中，图片名即为symbol的Id值，path即为symbol中svg的path属性值。然后，基于node拼装html文件，并将生成的资源文件注入到此html文件中，遍历JSON数据，将所有的图标按照固定格式渲染到html文件中，此文件即为Iconfont的示例文件(index.html)，以便于查看图标效果。最终，将由node自动编辑完成的iconfont.css、iconfont.js、示例文件存入寄存器4中。
另外，图2中的寄存器4负责存放iconfont构造器3生成的iconfont资源文件和.svg文件解析器2上送来的字体文件，寄存器4的存放方式与svg图片收集器1类似，可以存放于后台数据库，也可以直接存放在文件目录中，即svg图片以及iconfont资源保存在文件目录或数据库中。文件目录是指：为实现“按名存取”，必须建立文件名与辅存空间中物理地址的对应关系，体现这种对应关系的数据结构称为文件目录，每一个文件在文件目录中登记一项，作为文件系统建立和维护文件的清单。一个计算机系统中有成千上万个文件，为了便于对文件进行存取和管理，计算机系统建立文件的索引，即文件名和文件物理位置之间的映射关系，这种文件的索引称为文件目录。文件目录为每个文件设立一个表目。文件目录表目至少要包含文件名、文件内部标识、文件的类型、文件存储地址、文件的长度、访问权限、建立时间和访问时间等内容。文件目录(或称为文件夹)是由文件目录项组成的，文件目录分为一级目录、二级目录和多级目录，多级目录结构也称为树形结构，在多级目录结构中，每一个磁盘有一个根目录，在根目录中可以包含若干子目录和文件，在子目录中不但可以包含文件，而且还可以包含下一级子目录，这样类推下去就构成了多级目录结构。数据库则是“按照数据结构来组织、存储和管理数据的仓库”。是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。数据库是存放数据的仓库。它的存储空间很大，可以存放百万条、千万条、上亿条数据。但是数据库并不是随意地将数据进行存放，是有一定的规则的，否则查询的效率会很低。数据库是一个按数据结构来存储和管理数据的计算机软件系统。数据库的概念实际包括两层意思：一是数据库是一个实体，它是能够合理保管数据的“仓库”，用户在该“仓库”中存放要管理的事务数据，“数据”和“库”两个概念结合成为数据库。数据库是数据管理的新方法和技术，它能更合适的组织数据、更方便的维护数据、更严密的控制数据和更有效的利用数据。本申请并不限定采用何种方式存放iconfont构造器3生成的iconfont资源文件和.svg文件解析器2上送来的字体文件，两者可以采用相同方式进行储存，也可采用不同的方式进行保存，这里不作限定。
在上述实施例中，对于生成iconfont资源的方法进行了详细描述，本申请还提供生成iconfont资源的装置对应的实施例。需要说明的是，本申请从两个角度对装置部分的实施例进行描述，一种是基于功能模块的角度，另一种是基于硬件的角度。
基于功能模块的角度，本实施例提供一种生成iconfont资源的装置，图3为本申请实施例提供的生成iconfont资源的装置的结构图，如图3所示，该装置包括：
收集模块10，用于收集设计完成的svg图片；
编译模块11，用于编译svg图片生成字体文件和.svg文件；
解析模块12，用于解析.svg文件得到解析数据；
加载模块13，用于以解析数据为驱动，加载预定义的iconfont模板以生成其他iconfont资源；其中，iconfont资源包括iconfont.css、iconfont.js、示例文件、以及字体文件。
由于装置部分的实施例与方法部分的实施例相互对应，因此装置部分的实施例请参见方法部分的实施例的描述，这里暂不赘述。
本实施例提供的生成iconfont资源的装置，与上述方法对应，故具有与上述方法相同的有益效果。
基于硬件的角度，本实施例提供了另一种生成iconfont资源的装置，图4为本申请另一实施例提供的生成iconfont资源的装置的结构图，如图4所示，生成iconfont资源的装置包括：存储器20，用于存储计算机程序；
处理器21，用于执行计算机程序时实现如上述实施例中所提到的生成iconfont资源的方法的步骤。
其中，处理器21可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器21可以采用数字信号处理器(Digital Signal Processor，DSP)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable LogicArray，PLA)中的至少一种硬件形式来实现。处理器21也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称中央处理器(CentralProcessing Unit，CPU)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器21可以集成有图像处理器(Graphics Processing Unit，GPU)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器21还可以包括人工智能(Artificial Intelligence，AI)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器20可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器20还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。本实施例中，存储器20至少用于存储以下计算机程序201，其中，该计算机程序被处理器21加载并执行之后，能够实现前述任一实施例公开的生成iconfont资源的方法的相关步骤。另外，存储器20所存储的资源还可以包括操作系统202和数据203等，存储方式可以是短暂存储或者永久存储。其中，操作系统202可以包括Windows、Unix、Linux等。数据203可以包括但不限于生成iconfont资源的方法涉及到的数据等。
在一些实施例中，生成iconfont资源的装置还可包括有显示屏22、输入输出接口23、通信接口24、电源25以及通信总线26。
本领域技术人员可以理解，图中示出的结构并不构成对生成iconfont资源的装置的限定，可以包括比图示更多或更少的组件。
本申请实施例提供的生成iconfont资源的装置，包括存储器和处理器，处理器在执行存储器存储的程序时，能够实现如下方法：生成iconfont资源的方法。
本实施例提供的生成iconfont资源的装置，与上述方法对应，故具有与上述方法相同的有益效果。
最后，本申请还提供一种计算机可读存储介质对应的实施例。计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现如上述方法实施例中记载的步骤。
可以理解的是，如果上述实施例中的方法以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，执行本申请各个实施例描述的方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(RandomAccess Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
本实施例提供的计算机可读存储介质，与上述方法对应，故具有与上述方法相同的有益效果。
以上对本申请所提供的生成iconfont资源的方法、装置以及介质进行了详细介绍。说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。
还需要说明的是，在本说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括上述要素的过程、方法、物品或者设备中还存在另外的相同要素。
Claims (10)
1.一种生成iconfont资源的方法，其特征在于，包括：
收集设计完成的svg图片；
编译所述svg图片生成字体文件和.svg文件；
解析所述.svg文件得到解析数据；
以所述解析数据为驱动，加载预定义的iconfont模板以生成其他所述iconfont资源；其中，所述iconfont资源包括iconfont.css、iconfont.js、示例文件、以及所述字体文件。
2.根据权利要求1所述的生成iconfont资源的方法，其特征在于，所述编译所述svg图片生成字体文件和.svg文件包括：
通过webpack技术对所述svg图片进行编译以生成所述字体文件和所述.svg文件。
3.根据权利要求2所述的生成iconfont资源的方法，其特征在于，所述解析.svg文件得到解析数据包括：
通过node将所述.svg文件转换为字符串；
解析所述字符串中各所述svg图片的名称、unicode值、svg绘图代码得到所述解析数据。
4.根据权利要求3所述的生成iconfont资源的方法，其特征在于，所述以所述解析数据为驱动，加载预定义的iconfont模板以生成其他所述iconfont资源包括：
根据所述解析数据中所述svg图片的名称确定iconfont的图标类型；其中，所述图标类型包括单色图标和多色图标；
根据所述图标类型选择对应的所述iconfont模板；
加载所述iconfont模板以生成其他所述iconfont资源。
5.根据权利要求4所述的生成iconfont资源的方法，其特征在于，所述根据所述图标类型选择对应的所述iconfont模板包括：
若所述iconfont的所述图标类型为单色图标，则选择预定义的css模板；
若所述iconfont的所述图标类型为多色图标，则选择预定义的Js模板。
6.根据权利要求5所述的生成iconfont资源的方法，其特征在于，所述加载所述iconfont模板以生成其他所述iconfont资源包括：
若所述iconfont模板为所述css模板，则通过所述css模板将所述解析数据逐一通过css伪类的形式编码到所述css模板中生成所述iconfont.css；
若所述iconfont模板为所述Js模板，则通过所述Js模板将所述解析数据逐一通过symbol+svg的形式编码到所述Js模板中生成所述iconfont.js；
基于所述node拼装html文件，将所述iconfont.css和/或所述iconfont.js注入到所述html文件中，并将所有的图标按照固定格式渲染到所述html文件中得到所述iconfont的所述示例文件。
7.根据权利要求1至6任意一项所述的生成iconfont资源的方法，其特征在于，所述svg图片以及所述iconfont资源保存在文件目录或数据库中。
8.一种生成iconfont资源的装置，其特征在于，包括：
收集模块，用于收集设计完成的svg图片；
编译模块，用于编译所述svg图片生成字体文件和.svg文件；
解析模块，用于解析所述.svg文件得到解析数据；
加载模块，用于以所述解析数据为驱动，加载预定义的iconfont模板以生成其他所述iconfont资源；其中，所述iconfont资源包括iconfont.css、iconfont.js、示例文件、以及所述字体文件。
9.一种生成iconfont资源的装置，其特征在于，包括存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现如权利要求1至7任一项所述的生成iconfont资源的方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的生成iconfont资源的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210967896.5A CN115328353B (zh) | 2022-08-12 | 2022-08-12 | 一种生成iconfont资源的方法、装置以及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210967896.5A CN115328353B (zh) | 2022-08-12 | 2022-08-12 | 一种生成iconfont资源的方法、装置以及介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115328353A true CN115328353A (zh) | 2022-11-11 |
| CN115328353B CN115328353B (zh) | 2024-02-09 |
Family
ID=83923709
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210967896.5A Active CN115328353B (zh) | 2022-08-12 | 2022-08-12 | 一种生成iconfont资源的方法、装置以及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115328353B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116680489A (zh) * | 2023-04-07 | 2023-09-01 | 深圳市同行者科技有限公司 | 一种svg图像颜色的修改方法、装置、设备及存储介质 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2005111862A1 (en) * | 2004-05-17 | 2005-11-24 | Gordon Layard | Automated e-learning and presentation authoring system |
| CN104267947A (zh) * | 2014-09-23 | 2015-01-07 | 广州金山网络科技有限公司 | 一种编辑弹窗图片的方法及弹窗图片编辑装置 |
| CN112016267A (zh) * | 2020-08-05 | 2020-12-01 | 北京达佳互联信息技术有限公司 | 一种图标字体处理方法、装置及存储介质 |
| CN113836469A (zh) * | 2021-09-29 | 2021-12-24 | 上海掌门科技有限公司 | 网站前端开发方法和设备 |
| CN114020187A (zh) * | 2021-10-26 | 2022-02-08 | 济南浪潮数据技术有限公司 | 字体图标的显示方法、装置及电子设备 |
| CN114237407A (zh) * | 2021-12-16 | 2022-03-25 | 南京冰鉴信息科技有限公司 | 一种字体图标处理方法、装置及计算机可读存储介质 |
| CN114254585A (zh) * | 2021-12-21 | 2022-03-29 | 北京百度网讯科技有限公司 | 字体生成方法、装置、电子设备及存储介质 |
-
2022
- 2022-08-12 CN CN202210967896.5A patent/CN115328353B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2005111862A1 (en) * | 2004-05-17 | 2005-11-24 | Gordon Layard | Automated e-learning and presentation authoring system |
| CN104267947A (zh) * | 2014-09-23 | 2015-01-07 | 广州金山网络科技有限公司 | 一种编辑弹窗图片的方法及弹窗图片编辑装置 |
| CN112016267A (zh) * | 2020-08-05 | 2020-12-01 | 北京达佳互联信息技术有限公司 | 一种图标字体处理方法、装置及存储介质 |
| CN113836469A (zh) * | 2021-09-29 | 2021-12-24 | 上海掌门科技有限公司 | 网站前端开发方法和设备 |
| CN114020187A (zh) * | 2021-10-26 | 2022-02-08 | 济南浪潮数据技术有限公司 | 字体图标的显示方法、装置及电子设备 |
| CN114237407A (zh) * | 2021-12-16 | 2022-03-25 | 南京冰鉴信息科技有限公司 | 一种字体图标处理方法、装置及计算机可读存储介质 |
| CN114254585A (zh) * | 2021-12-21 | 2022-03-29 | 北京百度网讯科技有限公司 | 字体生成方法、装置、电子设备及存储介质 |
Non-Patent Citations (2)
| Title |
|---|
| 冯菲菲;邹连英;: "基于Webpack及React技术的Scratch互动在线学习平台设计", 电脑知识与技术, no. 20 * |
| 张灵芝;: "纯CSS3图标技术方案在WebApp中的设计与应用", 电脑与信息技术, no. 05 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116680489A (zh) * | 2023-04-07 | 2023-09-01 | 深圳市同行者科技有限公司 | 一种svg图像颜色的修改方法、装置、设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115328353B (zh) | 2024-02-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6470349B1 (en) | Server-side scripting language and programming tool | |
| US10031896B2 (en) | Authoring, deploying and using interactive, data-driven two or more dimensional content | |
| US6594823B1 (en) | Method and system for representing a high-level programming language data structure in a mark-up language | |
| CN110020307A (zh) | 一种客户端视图的绘制方法和装置 | |
| CN110688118B (zh) | 一种网页优化方法及装置 | |
| US10489024B2 (en) | UI rendering based on adaptive label text infrastructure | |
| CN113377373A (zh) | 基于解析引擎的页面加载方法、装置、计算机设备及介质 | |
| CN114996619A (zh) | 一种页面显示的方法、装置、计算机设备及存储介质 | |
| CN115328353B (zh) | 一种生成iconfont资源的方法、装置以及介质 | |
| CN115599386A (zh) | 代码生成方法、装置、设备及存储介质 | |
| US20120124555A1 (en) | Optimization of Compiled Control Objects | |
| Winter et al. | Formal information modelling for standardisation in the spatial domain | |
| Zhao et al. | Pattern-based design evolution using graph transformation | |
| US7657869B2 (en) | Integration of external tools into an existing design environment | |
| CN102486731B (zh) | 增强软件的软件调用栈的可视化的方法、设备和系统 | |
| CN114968220A (zh) | 一种动态门户设计方法及装置 | |
| CN111563363B (zh) | 一种超文本标记语言文档内容生成及解析方法 | |
| CN113626016A (zh) | 一种基于Vue+Element UI+Koa2的前后端分离的可重用组件 | |
| US20150324333A1 (en) | Systems and methods for automatically generating hyperlinks | |
| de Boer et al. | A logical viewpoint on architectures | |
| CN116680444B (zh) | 数据处理方法、装置、设备及存储介质 | |
| CN113608726B (zh) | 代码生成方法、装置、电子设备及存储介质 | |
| CN116991506B (zh) | 一种网页渲染方法、装置、终端和存储介质 | |
| Pekonen | Fundamentals of HTML5 game optimization | |
| Sitnikovski et al. | Racket Programming Language |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |