Icons

Note: This page is currently not up to date.

You can load both normal image icons and svg icons using the properties The parses will detect the .svg file ending and load it appropriately. Icons in svg form are preferred and support additional features you can use.

Generally all icons are lazily loaded which means all information needed for them to be displayed is only loaded into memory once a request is made to the icon to either be painted or calculate it's size. Additionally svg icons that stem from the same file but have different sizes only add any minimal additional cost because they share the same svg file in memory that is then painted in different sizes.

Specifying the size of your icon

The size of your icon will if not specifically set will default to 16 x 16. In the properties if you add (w,h) after the path and additional tags (see below) the icon will be loaded with the width w and height h.

UIAwareIcon

When adding the [aware] tag behind the icon path tells the parse you want to declare a UIAwareIcon. This means it will load a dark and a light variant of your icon (which you both have to provide).

Example

exampleIcon = example/icon.svg[aware]

With the according folder structure:

com
└── weis
    └── darklaf
        └── icons
            ├── dark
            │   └── example
            │       └── icon.svg
            └── light
                └── example
                    └── icon.svg

You have to comply the whole folder structure (at this point). UI aware icons will automatically adjust depending on the theme settings (see Theme). If you declare the [dual] tag instead the opposite icon will be used instead.

Themed Icons

If you add the [themed] at the end of your icon path when loaded the icon will be altered to conform any ui property specific color values. This is best shown by an example:

<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
    <defs id="colors">
        <linearGradient id="CheckBox.activeFillColor">
            <stop offset="0" stop-color="#43494A"/>
            <stop offset="1" stop-color="#43494A"/>
        </linearGradient>
        <linearGradient id="CheckBox.activeBorderColor">
            <stop offset="0" stop-color="#6B6B6B"/>
            <stop offset="1" stop-color="#6B6B6B"/>
        </linearGradient>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <rect width="14" height="14" x="3" y="2" fill="url(#CheckBox.activeFillColor)" rx="2"/>
        <path fill="url(#CheckBox.activeBorderColor)"
              d="M5,2 L15,2 C16.1045695,2 17,2.8954305 17,4 L17,14 C17,15.1045695 16.1045695,16 15,16 L5,16 C3.8954305,16
                 3,15.1045695 3,14 L3,4 C3,2.8954305 3.8954305,2 5,2 Z M5,3 C4.44771525,3 4,3.44771525 4,4 L4,14 
                 C4,14.5522847 4.44771525,15 5,15 L15,15 C15.5522847,15 16,14.5522847 16,14 L16,4 C16,3.44771525
                 15.5522847,3 15,3 L5,3 Z"/>
    </g>
</svg>

All values which will be replaced sit inside the <defs id="colors"> tag and are represented by linear gradients. If the icon is loaded it will look for the value of CheckBox.activeFillColor and replace the color value accordingly. (The file is not altered only the object in memory). Even though you technically do not need to add the value specification because they are supplied at runtime it is best practice to still include them if at one point you want to view the icon outside a swing application.

These are is both still a valid color declaration:

<defs id="colors">
    <linearGradient id="CheckBox.activeFillColor"></linearGradient>
    <linearGradient id="CheckBox.activeBorderColor"/>
</defs>

Note: Even though gradients are used they only represent solid colors.