Icon processing method and device during program operation, electronic device, and storage medium

Abstract

The present application provides an icon processing method and device, electronic device, and storage medium during program execution, wherein the method includes: calling a generation function corresponding to a target icon identifier of a target icon to be displayed from a cache through an icon component of a software framework corresponding to the program, wherein the generation function is a class object obtained by processing the target original icon file content of the target icon and used to generate a virtual node of the software framework; finally, the target icon is displayed in the interface according to the generation function and the current component of the icon component, thereby realizing conversion processing of the icon during program execution so that the icon can be displayed normally in different software frameworks.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method and device for processing icons during program execution, an electronic device, and a storage medium. Background Art

[0002] Icons play a crucial role in website design and development. They not only summarize and generalize content but also serve as navigational tools, significantly enhancing the user experience. Therefore, icon processing solutions are essential components of any project. SVG icons (also known as vector icons) are currently the mainstream. SVG is an XML-based format for describing two-dimensional vector icons. SVG icons offer the advantage of maintaining image quality even when scaled.

[0003] With the rapid development of front-end technology, front-end frameworks are constantly emerging. Different front-end frameworks often have different corresponding icon processing solutions. However, existing technologies usually process icons before or during program compilation. For example, the Element-UI component library of the VUE framework uses the font-class font library solution. Before the program runs, it converts icons into fonts, then converts them into class names, and finally adds the element class name to enable the use of the icons. In contrast, the Ant Design component library of the React framework, due to JSX's ability to parse markup language tags, converts SVG icons into React components before the program runs.

[0004] It can be seen that the existing technology processes icons before or during compilation. Once the icon processing solution is connected to other platforms as an access party, the platform party often provides a scaffolding with more restrictions (used to build database-based applications) and does not open the configuration modification function of the construction tool. As a result, the icon cannot be used directly, which also leads to difficulties in subsequent maintenance. That is, after the icon is connected to other platforms, the size and color of the icon cannot be customized.

[0005] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute prior art known to ordinary technicians in the field. Summary of the Invention

[0006] In view of the above problems, the present application is proposed to provide a method and device for processing icons during program execution, an electronic device, and a storage medium that overcome the above problems or at least partially solve the above problems, including:

[0007] A method for processing icons during program execution, the method comprising:

[0008] Calling a generation function corresponding to a target icon identifier of a target icon to be displayed from a cache through an icon component of a software framework corresponding to the program, wherein the generation function is a class object obtained by processing the target original icon file content of the target icon and used to generate a virtual node of the software framework;

[0009] The target icon is displayed in the interface according to the generation function and the current properties of the icon component.

[0010] Optionally, before calling the generation function corresponding to the target icon identifier of the target icon to be displayed from the cache through the icon component of the software framework corresponding to the program, the method further includes:

[0011] The original icon file of each icon is obtained, and the original icon file content of the original icon file is loaded into the memory.

[0012] Optionally, the calling of a generation function corresponding to a target icon identifier of a target icon to be displayed from the cache includes:

[0013] When the generation function corresponding to the target icon identifier does not exist in the cache, obtaining the target original icon file content of the target icon from the memory according to the target icon identifier;

[0014] The target original icon file content is converted into a generation function corresponding to the software framework.

[0015] Optionally, converting the target original icon file content into a generation function corresponding to the software framework includes:

[0016] Calling a browser interface to convert the target original icon file content of the target original icon file into a corresponding document object model node;

[0017] The method function of creating an element node of the software framework is called, and the document object model node corresponding to the target icon is converted into a generation function corresponding to the software framework.

[0018] Optionally, the calling of a browser interface to convert the target original icon file content into a corresponding document object model node further includes:

[0019] Modify the size attribute and fill color attribute in the target original icon file content so that the size of the target icon is consistent with the size in the current attributes of the icon component, and the fill color attribute of the target icon is consistent with the fill color in the current attributes of the icon component.

[0020] Optionally, the obtaining of the original icon files of the respective icons and loading the original icon file contents of the original icon files into the memory includes:

[0021] Calling a packaging tool to obtain files that comply with icon file rules as original icon files, and packaging the original icon file contents of the obtained multiple original icon files into a target file;

[0022] The target file is loaded to load the original icon file content contained in the target file into the memory.

[0023] Optionally, after converting the target original icon file content into a generation function corresponding to the software framework, the method further includes:

[0024] The generated function is saved in the cache.

[0025] A device for processing icons when a program is running, the device comprising:

[0026] A generation function determination module is used to call a generation function corresponding to a target icon identifier of a target icon to be displayed from a cache through an icon component of a software framework corresponding to the program, wherein the generation function is a class object obtained by processing the content of a target original icon file of the target icon and is used to generate a virtual node of the software framework;

[0027] The target icon display module is used to display the target icon in the interface according to the generation function and the current properties of the icon component.

[0028] Optionally, the device further comprises:

[0029] The original content loading module is used to obtain the original icon file of each icon and load the original icon file content of the original icon file into the memory.

[0030] Optionally, the generating function determining module includes:

[0031] an original content acquisition module, configured to acquire the target original icon file content of the target icon from the memory according to the target icon identifier when the generation function corresponding to the target icon identifier does not exist in the cache;

[0032] The original content conversion module is used to convert the target original icon file content into a generation function corresponding to the software framework.

[0033] Optionally, the conversion module includes:

[0034] A first conversion module, configured to call a browser interface to convert the target original icon file content of the target original icon file into a corresponding document object model node;

[0035] The second conversion module is used to call the method function of the software framework to create an element node, and convert the document object model node corresponding to the target icon into a generation function corresponding to the software framework.

[0036] Optionally, the first conversion module is also used to modify the size attributes and fill color attributes in the target original icon file content, so that the size of the target icon is consistent with the size in the current attributes of the icon component, and the fill color attribute of the target icon is consistent with the fill color in the current attributes of the icon component.

[0037] Optionally, the original content loading module includes:

[0038] The packaging module is used to call the packaging tool to obtain files that meet the icon file rules as original icon files, and package the original icon file contents of the obtained multiple original icon files into a target file;

[0039] The loading module is used to load the target file to load the original icon file content contained in the target file into the memory.

[0040] Optionally, the original content conversion module is further configured to save the generated function into the cache.

[0041] An electronic device includes a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, the steps of the icon processing method during program execution are implemented.

[0042] A computer-readable storage medium stores a computer program, which, when executed by a processor, implements the steps of the icon processing method when the program is running.

[0043] This application has the following advantages:

[0044] In an embodiment of the present application, during the running of the program, the generation function corresponding to the target icon identifier of the target icon to be displayed is called from the cache through the icon component of the software framework corresponding to the program. The generation function is a class object, which is obtained according to the target original icon file content of the target icon and is used to generate a virtual node of the software framework. Finally, according to the generation function and the current component of the icon component, the target icon is displayed in the interface, thereby realizing the conversion processing of the icon during the running of the program, so that the icon can be displayed normally in different software frameworks. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the technical solution of the present application, the following is a brief introduction to the drawings required for the description of the present application. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0046] Figure 1 This is a flowchart of a method for processing icons when a program is running according to an embodiment of the present application;

[0047] Figure 2 This is a flowchart of implementing the use of SVG icons in a React project in a specific example of the first embodiment of the present application;

[0048] Figure 3 This is a structural block diagram of an icon processing device during program execution according to an embodiment of the present application. DETAILED DESCRIPTION

[0049] To make the above-mentioned purposes, features, and advantages of this application more clearly understood, the present application is further described in detail below with reference to the accompanying drawings and specific embodiments. It is apparent that the embodiments described are only a portion of the embodiments of this application, not all of them. All other embodiments derived by persons of ordinary skill in the art based on the embodiments in this application without inventive effort are also within the scope of protection of this application.

[0050] SVG icons (i.e., vector icons) are currently the mainstream icon format. SVG is an XML-based language used to describe two-dimensional vector icons. SVG icons have the advantage of being scalable and distortion-free. In the existing technology, icons are processed by build tools before or during program compilation. When icons are connected to other platforms that do not allow the build tool to modify configuration, the icons will not work properly and subsequent maintenance will be difficult.

[0051] In view of this, an embodiment of the present application provides an icon processing method during program runtime. By converting and rendering the icons during program execution, the icons can still be displayed normally even if the icons are connected to a platform that does not open the configuration modification function of the build tool. This overcomes the defects of the prior art that the icons need to be converted before or during program compilation, resulting in the icons being unable to be used normally when connected to a platform that does not open the configuration modification function of the build tool, and difficulties in subsequent maintenance.

[0052] Reference Figure 1 , shows a flowchart of a method for processing icons in program operation provided by an embodiment of the present application. In the embodiment of the present application, the method may include the following steps:

[0053] Step 101: Calling a generation function corresponding to a target icon identifier of a target icon to be displayed from a cache through an icon component of a software framework corresponding to the program. The generation function is a class object obtained by processing the target original icon file content of the target icon and used to generate a virtual node of the software framework.

[0054] Step 102: Display the target icon in the interface according to the generation function and the current properties of the icon component.

[0055] During the program running process, the embodiment of the present application calls the generation function corresponding to the target icon identifier of the target icon to be displayed from the cache through the icon component of the software framework corresponding to the program. The generation function is a class object, which is obtained according to the target original icon file content of the target icon and is used to generate a virtual node of the software framework. Finally, according to the current properties of the generation function and the icon component, the target icon is displayed in the interface, thereby realizing the conversion processing of the icon during the program running process, so that the icon can be displayed normally in different software frameworks.

[0056] Next, the icon processing method when the program is running in this exemplary embodiment will be further described.

[0057] The embodiment of the present application provides an icon processing method when the program is running. When the program is initialized, it is necessary to obtain the original icon file of each icon and load the original icon file content of the original icon file of each icon into the memory. When the program is running, the original icon file content of the target icon to be displayed can be directly obtained from the memory for processing to display the corresponding icon in the interface. Among them, the original icon file refers to the original code file of the icon, such as the SVG code file of the SVG icon; the original icon file content can be understood as the original code in the original code file, for example, the SVG code file content is the original code in the SVG code file.

[0058] Exemplarily, a packaging tool can be used to obtain files that comply with icon file rules as original icon files, and the original icon file contents of the obtained multiple original icon files can be packaged into a target file, and then the target file can be loaded to load the contents of the obtained original files into the memory. Exemplarily, the packaging tool can be webpack (a module packager), which obtains a specific context by executing the require.context function (a function used to manage dependencies), and packages the original icon file contents of the original icon files that comply with the icon file rules into the same file, which is recorded as the target file. After the target file is loaded, the original icon file contents and the corresponding file names of the original icon files can be stored in the variables in the memory. This embodiment utilizes the batch import function of the packaging tool to improve the efficiency of data processing.

[0059] It should be noted that in other examples, the original icon file contents may be loaded into the memory in other ways instead of using a packaging tool, for example, by reading the original icon files one by one to load the contents of the original files into the memory.

[0060] In step 101, the icon component of the software framework corresponding to the program is used to call the generation function corresponding to the target icon identifier of the target icon to be displayed from the cache. The generation function is a class object, which is obtained by processing the target original icon file content of the target icon and is used to generate a virtual node of the software framework.

[0061] The icon component is implemented using the software framework corresponding to the program and is an access point for the icon. For ease of distinction, the icon that is about to be displayed in the interface is identified as the target icon. During program execution, when the target icon needs to be displayed in the interface, the target icon identifier of the target icon will be passed into the icon component, and the icon component can call the corresponding generation function from the cache based on the target icon identifier of the passed-in target icon. Among them, the icon identifier can be the name of the icon or the number of the icon, etc., which can uniquely identify the icon. The target icon identifier is used to uniquely determine the information of the target icon to be displayed.

[0062] The generation function refers to a function used to generate a virtual node (Vnode) of the software framework. It is obtained based on the target original icon file content of the target icon. The target original icon file content refers to the original code in the original code file of the target icon. For example, when the target icon is an SVG icon, the target original icon content is the original SVG code of the SVG icon. Among them, the generation function is a class object. When the generation function is called, it is equivalent to the class instantiating an object, which is the virtual node of the target icon. Custom icon attributes can be implemented through the generation function. That is, the received icon attributes can be merged through the generation function to achieve the modification of icon size and color.

[0063] In an optional embodiment of the present application, the above-mentioned calling the generation function corresponding to the target icon identifier of the target icon to be displayed from the cache may include: after determining the target icon identifier of the target icon, first calling the generation function corresponding to the target icon identifier from the cache. It is understood that in this embodiment, it is first determined whether the generation function corresponding to the target icon identifier is stored in the cache. If the generation function corresponding to the target icon identifier is stored in the cache, the generation function is directly obtained; if the generation function corresponding to the target icon identifier is not stored in the cache, the target original icon file content corresponding to the target icon identifier is obtained from the memory, and then the target original icon file content is converted into the generation function corresponding to the software framework.

[0064] This embodiment gives priority to obtaining the generation function corresponding to the target icon identifier of the target icon from the cache, which can improve the efficiency of data processing; when it cannot be obtained, the target original icon file content is obtained from the memory and converted into a generation function, which can realize on-demand conversion and save data processing resources.

[0065] Optionally, the above-mentioned conversion of the target original icon file content into a generation function corresponding to the software framework includes:

[0066] Calling the browser interface to convert the target original icon file content of the target icon into a corresponding document object model node; the original icon file content of an icon corresponds to a document object model node;

[0067] The method function of creating an element node of the software framework is called, and the document object model node corresponding to the target icon is converted into a generation function corresponding to the software framework.

[0068] In this embodiment, each icon corresponds to a document object model node, and the target original icon file content of the target icon is converted into a corresponding document object model (i.e., DOM) node by calling the browser interface; then, by calling the software framework's method of creating element nodes (such as the software framework's createElement method), the document object model node corresponding to the target icon to be displayed is converted into a generation function corresponding to the software framework. By first converting the original icon file content into a document object model node, and then converting the document object model node into a generation function corresponding to the software framework, it is easier to implement than directly converting the original icon file content into a generation function corresponding to the software framework, and the difficulty of conversion can be reduced.

[0069] Taking SVG icons as an example, the browser interface has the ability to parse SVG format codes. The target original file SVG code of the target icon is parsed through the browser interface, and the target original file SVG code is converted into the corresponding document object model node. Then, through the method of creating element nodes in the software framework, the document object model node of the target icon is converted into the generation function corresponding to the software framework, so that the target icon can be displayed in the interface designed based on the software framework.

[0070] Optionally, the process of calling the browser interface to convert the target original icon file content of the target icon into a corresponding document object model node includes:

[0071] Modify the size attribute and fill color attribute of the target original icon file content so that the size of the target icon is consistent with the size in the current attribute of the icon component, and the fill color attribute of the target icon is consistent with the fill color in the current attribute of the icon component.

[0072] The embodiments of this application take into account that most icons provided by designers cannot be used directly. In other words, in most cases, the fill color and size of the icons need to be modified when they are actually used. To facilitate the use of icons, in this embodiment, the browser interface also modifies the size and fill color attributes of the target original icon file content during the process of converting the target original icon file content into the corresponding document object model node, so that the target icon can be displayed based on the customized size and fill color attributes.

[0073] For example, using an SVG icon based on the VUE software framework, the size attributes include width and height. By calling the attribute setting interface, the width and height attributes of the SVG icon are modified to 1em (one character width, which can be understood as the current font size), and the fill color attribute of the SVG icon is modified to currentColor (the current color). This allows the size and color of the SVG icon to be modified later using the font-size and color CSS (Cascading Style Sheets) attributes. CSS is a computer language used to add style to structured documents. In other words, CSS is a markup language used to control the style of a web page and allows the separation of style information from the web page content. Software developers can design a variety of page styles using CSS attributes. In order to ensure that the display style of the icon matches the page style designed by the software developer through CSS properties, combined with the function of generating functions that can merge the current properties of the icon component, the width and height attributes in the original icon file content are modified to 1em. In this way, after the generating function merges the current properties of the icon component, the width and height of the target icon obtained are consistent with the width and height of the icon component; similarly, the fill color attribute in the original icon file content is modified to currentColor, so that after the generating function merges the current properties of the icon component, the fill color of the target icon obtained is consistent with the fill color of the icon component.

[0074] Furthermore, after converting the target original icon file content into a generation function corresponding to the software framework, the method further includes: saving the generation function to a cache. Exemplarily, the generation function can be saved in the cache using a map structure, where the map structure can use the icon identifier as a key and the generation function as a value. When the target icon needs to be displayed again, the corresponding generation function can be quickly found from the cache based on the map structure.

[0075] In another optional embodiment of the present application, the above-mentioned calling of the generation function corresponding to the target icon identifier of the target icon to be displayed from the cache may include: obtaining all original icon file contents from the memory, converting each original icon file content into a corresponding generation function, obtaining multiple generation functions corresponding to each icon, and saving the multiple generation functions in the cache. After determining the target icon identifier of the target icon, obtain the generation function corresponding to the target icon identifier from the cache. The process of converting each original icon file content into a corresponding generation function can be referred to the above description, that is, the original icon file content can be converted into a document object model node by calling the browser interface, and then the document object model node can be converted into a generation function, and in the process of converting the original icon file content into a document object model node, the size attribute and fill color attribute in the original icon file content can also be modified so that the size and color of the icon can be consistent with the size and color in the current attributes of the icon component.

[0076] This embodiment first converts the original icon file contents of all icons into corresponding generation functions and saves them in the cache, and then obtains the generation function corresponding to the icon identifier of the target icon from the cache, reducing the impact on data processing efficiency due to the absence of the corresponding generation function in the cache.

[0077] Optionally, when storing the generation function in the cache, a map structure may be used to store the generated function in the cache. The map structure may use the icon identifier of each icon as a key and the corresponding generation function as a value. After determining the icon identifier of the target icon, the corresponding generation function may be quickly found based on the map structure.

[0078] In step 102, the target icon is displayed in the interface according to the generation function and the current properties of the icon component.

[0079] In this embodiment, the generation function can receive some attribute values ​​and merge them into the corresponding virtual node; that is, the generation function can receive some attribute values, merge them with the attribute values ​​of the icon corresponding to the generation function, obtain new attribute values ​​of the icon, and finally display the icon in the interface according to the new attribute values. The attribute values ​​received by the generation function are the current attribute values ​​of the icon component, and the current attribute values ​​of the icon component include the value of the size attribute and the value of the fill color attribute.

[0080] Exemplarily, the attribute value of the icon corresponding to the generation function is recorded as the current attribute value of the icon, and the current attribute value of the icon can be consistent with the original attribute value of the icon; if the original attribute value of the icon is modified during the conversion of the original icon file content of the icon to the generation function, the modified attribute value is used as the current attribute value of the icon. In order to make the icon finally presented in the interface match the style of the interface, and the style of the interface related to the icon generally includes color and size; therefore, during the conversion of the original icon file content of the icon to the generation function, the value of the icon's size attribute can be modified to 1em, and the fill color attribute value can be modified to currentColor. In this way, after the generation function merges the current size attribute value and fill color attribute value of the icon with the current size attribute value and fill color attribute value of the icon component, the new size attribute value and new fill color attribute value of the icon are respectively consistent with the current size attribute value and fill color attribute value of the icon component. When the virtual node is finally returned, the rendered target icon can match the style of the interface.

[0081] During the program running process, the embodiment of the present application calls the generation function corresponding to the target icon identifier of the target icon to be displayed from the cache through the icon component of the software framework corresponding to the program. The generation function is obtained based on the target original icon file content of the target icon and is used to generate a virtual node of the software framework. Finally, according to the generation function and the current component of the icon component, the target icon is displayed in the interface, thereby realizing the conversion processing of the icon during the program running process, so that the icon can be displayed normally in different software frameworks.

[0082] To facilitate understanding of this solution by those skilled in the art, the following describes and illustrates the icon processing method during program operation provided by the embodiment of this application, taking the implementation of SVG icons in a React project as an example. React is a front-end framework.

[0083] In this example, when using the SVG icon, you only need to introduce an icon component implemented using the React framework. This icon component acts as a proxy, also known as a proxy component. The proxy component can receive the target SVG icon identifier to be displayed and pass the current attributes of the proxy component to the generation function corresponding to the target SVG icon. The generation function merges the current attributes of the proxy component and finally returns the virtual node corresponding to the React framework to display the target SVG icon in the interface.

[0084] like Figure 2 As shown, the flow of the icon processing method when this sample program is running is as follows:

[0085] The program runs and initializes, and the original icon file contents of all SVG icons' original icon files are loaded into memory through the collector. Specifically, the collector uses a packaging tool to obtain the original icon files of all SVG icons, and packages the original icon file contents of all SVG icons' original icon files into a target file; the collector then loads the target file to load the original icon file contents of all SVG icons into memory. Figure 2 In the example, the original icon files of all SVG icons include the original icon file of the home icon, the original icon file of the arrow icon, the original icon file of the search icon, etc. The packaging tool packages the original icon file contents of the original icon files that comply with the icon file rules into a target file; then the target file is loaded, and the original icon file contents of the SVG icon (i.e., the original code of the SVG icon) and the corresponding file name are stored in a variable, so that when it is necessary to extract the target original icon file contents of the target SVG icon to be displayed, the target original file contents corresponding to the target SVG icon can be obtained from the variable according to the file name of the target SVG icon. For example, when it is necessary to extract the original icon file contents of the home icon, the original icon file contents corresponding to the home icon can be obtained from the variable according to the file name corresponding to the home icon.

[0086] After determining the target icon to be rendered, the target original icon file content is converted into a corresponding generation function through a processor and a converter, wherein the processor is used to convert the target original icon file content into a corresponding document object model node, and the converter is used to convert the document object model node into a generation function corresponding to the software framework.

[0087] Specifically, the processor converts the string in the target SVG icon's original file content into a Document Object Model (DOM) using innerHTML (which sets the HTML element's child element to Hypertext Markup Language). It then calls the setAttribute interface (attribute setting interface) and the removeAttribute interface (attribute removal interface) to modify the target SVG icon's original attributes. Specifically, the removeAttribute interface deletes the original attribute values ​​of the SVG icon and the setAttribute interface reassigns new attributes to the SVG icon. Finally, the modified DOM node is returned.

[0088] The converter converts the DOM node into the software framework's generation function through the software framework's createElement interface (virtual node generation interface), and the generation function returns the software framework's virtual node. The generation function can merge the received attribute values ​​into the virtual node corresponding to the SVG icon, and then return the framework's virtual node. It should be noted that when the generation function is converted, the icon identifier of the SVG icon corresponding to the generation function is stored in the cache using a Map structure. In addition, in the React framework, DOM node attributes are named in camel case, so the field name needs to be processed during the conversion to avoid call problems caused by the field name.

[0089] When the proxy component passes in the target SVG icon identifier to be displayed, it first determines whether the target SVG icon identifier exists in the cache. If so, it means that the generation function corresponding to the target SVG icon identifier also exists in the cache, and the attribute value of the proxy component is passed into the generation function corresponding to the target SVG icon identifier. The generation function merges the received attribute value of the proxy component into the virtual node corresponding to the target SVG icon, and returns the virtual node to display the target SVG icon in the interface. If the target SVG icon identifier does not exist in the cache, it means that the generation function corresponding to the target SVG icon identifier does not exist in the cache, then the target original icon file content corresponding to the target SVG icon identifier is obtained from the memory, and the processor and converter are called to convert the target original icon file content into the corresponding generation function. After obtaining the generation function corresponding to the target SVG icon identifier, the attribute value of the proxy component is passed into the generation function corresponding to the target SVG icon identifier. The generation function merges the received attribute value of the proxy component into the virtual node corresponding to the target SVG icon, and returns the virtual node to display the target SVG icon in the interface. When the target SVG icon identifier does not exist in the cache, the target original icon file content corresponding to the target SVG icon identifier is obtained from the memory and converted into a corresponding generation function, and the generation function is saved in the cache for subsequent use.

[0090] This example uses the browser interface's ability to parse SVG files to convert the original icon file content of the SVG icon into a DOM node, thereby modifying the SVG icon's attributes and making it easier to modify the style of the SVG icon. By calling the software framework's virtual node generation interface, the DOM node is converted into a framework virtual node, which is compatible with the template syntax of each framework and meets the needs of the icon on each framework. In addition, the batch import function of the packaging tool is used to package the original icon file content of the SVG icon into one file, enabling batch loading of the original SVG icon files and improving data processing efficiency. This example does not modify the build configuration before or during compilation, but rather converts the SVG icon at runtime, achieving the effect that the SVG icon can be easily used in different frameworks.

[0091] It should be noted that for the method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present application are not limited by the order of the actions described, because according to the embodiments of the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present application.

[0092] Reference Figure 3 , shows a structural block diagram of an embodiment of an apparatus for processing icons during program execution of the present application. Corresponding to the embodiment of the method for processing icons during program execution described above, the apparatus for processing icons during program execution provided by the embodiment of the present application may include the following modules:

[0093] A generation function determination module 301 is configured to call a generation function corresponding to a target icon identifier of a target icon to be displayed from a cache through an icon component of a software framework corresponding to the program. The generation function is a class object obtained by processing the content of a target original icon file of the target icon and is used to generate a virtual node of the software framework.

[0094] The target icon display module 302 is used to display the target icon in the interface according to the generation function and the current properties of the icon component.

[0095] Optionally, the device further comprises:

[0096] The original content loading module is used to obtain the original icon file of each icon and load the original icon file content of the original icon file into the memory.

[0097] Optionally, the generating function determining module 301 includes:

[0098] an original content acquisition module, configured to acquire the target original icon file content of the target icon from the memory according to the target icon identifier when the generation function corresponding to the target icon identifier does not exist in the cache;

[0099] The original content conversion module is used to convert the target original icon file content into a generation function corresponding to the software framework.

[0100] Optionally, the conversion module includes:

[0101] A first conversion module, configured to call a browser interface to convert the target original icon file content of the target original icon file into a corresponding document object model node;

[0102] The second conversion module is used to call the method function of the software framework to create an element node, and convert the document object model node corresponding to the target icon into a generation function corresponding to the software framework.

[0103] Optionally, the first conversion module is also used to modify the size attributes and fill color attributes in the target original icon file content, so that the size of the target icon is consistent with the size in the current attributes of the icon component, and the fill color attribute of the target icon is consistent with the fill color in the current attributes of the icon component.

[0104] Optionally, the original content loading module includes:

[0105] The packaging module is used to call the packaging tool to obtain files that meet the icon file rules as original icon files, and package the original icon file contents of the obtained multiple original icon files into a target file;

[0106] The loading module is used to load the target file to load the original icon file content contained in the target file into the memory.

[0107] Optionally, the original content conversion module is further configured to save the generated function into the cache.

[0108] During the program running process of the embodiment of the present application, the generation function determination module calls the generation function corresponding to the target icon identifier of the target icon to be displayed from the cache through the icon component of the software framework corresponding to the program. The generation function is a class object, which is obtained according to the target original icon file content of the target icon and is used to generate a virtual node of the software framework. The target icon display module displays the target icon in the interface according to the generation function and the current component of the icon component, thereby realizing the conversion processing of the icon during the program running process, so that the icon can be displayed normally in different software frameworks.

[0109] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0110] An embodiment of the present application also discloses an electronic device, including a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, the steps of the icon processing method during program execution as described above are implemented.

[0111] The embodiment of the present application further discloses a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, the steps of the icon processing method during program execution as described above are implemented.

[0112] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0113] Those skilled in the art will appreciate that the embodiments of the present application can be provided as methods, devices, or computer program products. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0114] The embodiments of the present application are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the steps in the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0115] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0116] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable terminal device to implement the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0117] Although preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they become aware of the basic inventive concepts. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present invention.

[0118] Finally, it should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or terminal device that includes a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or terminal device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article, or terminal device that includes the element.

[0119] The above is a detailed introduction to the icon processing method and device, electronic device and storage medium during program execution provided by this application. Specific examples are used in this article to illustrate the principles and implementation methods of this application. The description of the above embodiments is only used to help understand the method of this application and its core idea. At the same time, for general technical personnel in this field, based on the ideas of this application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on this application.

Claims

1. A method for processing icons during program execution, characterized in that: The method comprises: A generation function corresponding to a target icon identifier of a target icon to be displayed is called from a cache through an icon component of a software framework corresponding to a program, wherein the generation function is a class object, and is obtained by converting the target original icon file content of the target icon into a document object model node corresponding to the target icon, and converting the document object model node, and is used to generate a virtual node of the software framework; in the process of converting the target original icon file content of the target icon into a document object model node corresponding to the target icon, and converting the document object model node to obtain the generation function, attributes in the target original icon file content are modified to current attributes of the icon component, so that the generated function merges the attributes in the target original icon file content with the current attributes; The target icon is displayed in the interface according to the generation function and the current properties of the icon component.

2. The method according to claim 1, characterized in that Before calling the generation function corresponding to the target icon identifier of the target icon to be displayed from the cache through the icon component of the software framework corresponding to the program, the method further includes: The original icon file of each icon is obtained, and the original icon file content of the original icon file is loaded into the memory.

3. The method according to claim 2, characterized in that The step of calling a generation function corresponding to a target icon identifier of a target icon to be displayed from a cache includes: When the generation function corresponding to the target icon identifier does not exist in the cache, obtaining the target original icon file content of the target icon from the memory according to the target icon identifier; Convert the target original icon file content into a generation function corresponding to the software framework.

4. The method according to claim 3, characterized in that The step of converting the target original icon file content into a generation function corresponding to the software framework includes: Calling a browser interface to convert the target original icon file content of the target original icon file into a corresponding document object model node; The method function of creating an element node of the software framework is called, and the document object model node corresponding to the target icon is converted into a generation function corresponding to the software framework.

5. The method according to claim 4, characterized in that The calling of the browser interface to convert the target original icon file content into a corresponding document object model node also includes: Modify the size attribute and fill color attribute in the target original icon file content so that the size of the target icon is consistent with the size in the current attributes of the icon component, and the fill color attribute of the target icon is consistent with the fill color in the current attributes of the icon component.

6. The method according to claim 2, characterized in that The step of obtaining the original icon file of each icon and loading the original icon file content of the original icon file into the memory includes: Calling a packaging tool to obtain files that comply with icon file rules as original icon files, and packaging the original icon file contents of the obtained multiple original icon files into a target file; The target file is loaded to load the original icon file content contained in the target file into the memory.

7. The method according to claim 3, characterized in that After converting the target original icon file content into a generation function corresponding to the software framework, the method further includes: The generated function is saved in the cache.

8. An icon processing device during program execution, characterized in that: The device comprises: A generation function determination module is used to call a generation function corresponding to a target icon identifier of a target icon to be displayed from a cache through an icon component of a software framework corresponding to a program, wherein the generation function is a class object, which is obtained by converting the target original icon file content of the target icon into a document object model node corresponding to the target icon, and converting the document object model node, and is used to generate a virtual node of the software framework; in the process of converting the target original icon file content of the target icon into a document object model node corresponding to the target icon, and converting the document object model node to obtain the generation function, the attributes in the target original icon file content are modified to the current attributes of the icon component, so that the generated generation function merges the attributes in the target original icon file content with the current attributes; The target icon display module is used to display the target icon in the interface according to the generation function and the current properties of the icon component.

9. An electronic device, characterized in that: The invention comprises a processor, a memory and a computer program stored in the memory and capable of running on the processor, wherein when the computer program is executed by the processor, the steps of the icon processing method during program execution according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the icon processing method when the program is running according to any one of claims 1 to 7 are implemented.

Images