Icons

In a web app specifically, using icons offers several advantages that can enhance the user experience and functionality:

  • Improved navigation and user interface clarity.
  • Streamlined action buttons and cleaner interface design.
  • Effective feedback and alert communication.
  • Enhanced sorting, filtering, and input field hints.
  • Visualizing progress and loading.
  • Encouraging user engagement and interactivity.
  • Responsive design for different devices.
  • Reinforcing brand identity.
  • Language-agnostic communication.
  • Aesthetically pleasing design.
  • Icons in web apps serve to simplify interfaces, guide users, and enhance aesthetics and functionality.

Therefore, Genio provides the option to insert icons of various types:

  • Transparente Picture
  • Icon
  • Letter font
  • Vector

How to add?

To add icons or resources in the most generic form, it is necessary to import the file into the GenCopy_[CLIENT] folder in the same directory where you want to store the files. For example: ...\GenCopy_QUIDGEST\GenVueJS\GenioMVC\ClientApp\public\Content\img

  • Go to the resources menu.
  • Use the insert button to add a new resource.
  • Identifier: File identifier (required).
  • File Name: Name of the file you wish to use (e.g., "file01.png") (required).
  • Absolute Path: You may use an absolute path to identify the file (optional).
  • Relative Path: You can refer to a relative path, but the file must already exist in the Content directory of the project (optional).
  • Both paths are optional, but it is required to add at least one of the paths.
  • File Type: You can choose the type of file you wish to introduce. Depending on the file type, the configuration differs (required).
  • Generation Action: This is the action to perform on the file during generation. You can choose between "Nothing", which is the default, and "Copy if New" and "Copy Always".

File Types

Transparente Picture

Apply on Genio

  • To add an icon resource, the file must have a .png or .jpg extension or another traditional image extension.

  • Add the resource, configure the necessary settings, and select the icon type.

Icon

An ICO is a type of image file format that is specifically designed for storing icons for Windows operating systems. These icons are typically used for representing applications, files, or directories on the computer. ICO format files can contain multiple images of varying sizes and color depths, which makes it possible for the icons to be displayed optimally on different screen resolutions and settings. This unique feature is one of the reasons why ICO format is widely used and preferred for creating icons.

(Retrived from https://cloudinary.com/guides/image-formats/ico-format-origins-common-uses-and-important-pros-cons on January 08th, 2024)

Apply on Genio

  • To add an icon resource, the file must have a .ico extension.

  • Add the resource, configure the necessary settings, and select the icon type.

Letter font

Icon fonts are typefaces that use tiny images rather than letterforms. Like type, each character is scalable and can be modified using CSS. The main reasons for using an icon font are that you can change the size, color, shape, with ease. Icon fonts are transparent by nature so you can put them on any color or type of background and you can add strokes or change the opacity of icons.

(Retrived from https://designshack.net/articles/typography/what-is-an-icon-font/ on January 08th, 2024)

Apply on Genio

  • To add an icon resource, the file must have a .scss extension.

The file must contain the class of your icon, example: .ID_EXAMPLE { @extend .glyphicons; @extend .glyphicons-list; }

  • The ID_EXAMPLE serves as the resource identifier, while glyphicons-list acts as the icon reference. For additional icon options, you can explore a variety of choices at Glyphsearch or any other preferred resource page.

  • Add the resource, configure the necessary settings, and select the Letter font type.

Vector

An SVG (scalable vector format) file can give you a little more flexibility in design. (You aren’t limited to one color). The small, scalable files can be uploaded right into your media directory and are easy to work with. This is a good option if you only need a handful of icons and don’t want to deal with a library. SVGs are more flexible with the ability to add more colors and animation.

Apply on Genio

To add an icon resource, the file must have a .svg extension. The file must contain the icon vector, example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" style="enable-background:new 0 0 48 48;" xml:space="preserve" viewBox="21.23 14.23 5.53 19.53">
<g id="option-vertical_2_">
    <path id="option_2_" d="M26.766,17c0,1.527-1.238,2.766-2.766,2.766S21.234,18.527,21.234,17s1.238-2.766,2.766-2.766   S26.766,15.473,26.766,17z M24,21.234c-1.527,0-2.766,1.238-2.766,2.766s1.238,2.766,2.766,2.766s2.766-1.238,2.766-2.766   S25.527,21.234,24,21.234z M24,28.234c-1.527,0-2.766,1.238-2.766,2.766s1.238,2.766,2.766,2.766s2.766-1.238,2.766-2.766   S25.527,28.234,24,28.234z"/>
</g>
</svg>

  • You can search on web for another svg icons and incluse transform me them for different purposes.

  • Add the resource, configure the necessary settings, and select the Vector type.

Generation Action

The options to differentiate what happens during generation are important because they allow changing the behavior based on the existence of the file.

  • Nothing: During generation, nothing happens to this resource. That is, even if it does not exist, it will not be included in the generation process.
  • Copy if New: If it is a new file, i.e., if there is no file with that name in the project folder, then the file from the GenCopy_[Client] directory is copied to the project directory during generation. NOTE: In case of updating the resource with the same name, it will not be updated during generation.
  • Copy Always: Every time the project is generated, the resource is always copied from the GenCopy[Client] folder to the project folder. NOTE: This can slow down the generation process and reduce performance. However, even if the file in the GenCopy[Client] is updated, the file in the project directory is always updated.

How to use?

The icons can be used in various places, notably in:

  • Buttons
  • Static Images
  • Menu Entries
  • Modules
  • Tabs
  • Others

For most locations where icons are used, the method of use is always the same; it is only necessary to refer to the resource to be used through the specialized "icon" field. In forms for inserting buttons, static images, menu entries, tabs, among others, you will always find a field for this purpose.

  • However, the method of use in modules differs from the rest. In the module identification area, there is a field to add the icon, but it does not allow choosing from all existing resources.
  • In this specific case, it is necessary to manually add the Identifier of the resource. It should be noted that the identifier must be 8 characters in length (this must be taken into account at the time of creation).