Using Tabler Icons

Printable View

15 January 2021, 03:13 PM
Acorn

1 Attachment(s)

Using Tabler Icons
Xara suggests Tabler Icons as a free resource (https://www.xara.com/free-design-resources/) but then fails on how they should be used.

A little used Xara tool is the Xara Widget Generator that is created as a XWR file.

Here is an example for the Tabler Icons:

Code:

<XaraWidget> <WidgetName>SVG Icon Generator</WidgetName> <CreateURL>https://tablericons.com</CreateURL> <BrowserWidth>1280</BrowserWidth> <BrowserHeight>960</BrowserHeight> <WidgetHelp> - Pick your icon and design it - Click to copy to your Clipboard - Click on the Insert button. </WidgetHelp> </XaraWidget>

Copy this into a file and save as Tabler Icons.xwr.
I keep my XWRs in a Xara Widgets folder.

In use:
- Drag Tabler Icons.xwr from the saved folder directly onto the position on to your design and Drop.
- An IE (!) window open with the Icons accessible to tweak and pick. This window is a wrapper with three bottom Buttons: Insert, Cancel, Help.
  - Cancel closes the modal window, leaving your design unchanged.
  - Help simply lists the <WidgetHelp> instructions.
  - The use of Insert is described below:
- Search for an icon and change its Size, Thickness and Colour as required.
- Click the icon.
- Finally, click the Insert Button.
The picked icon will be added to your design as a Placeholder. Its size cannot be adjusted directly - more later.

Modifications
If you need to alter it, right-click > Edit widget and the modal window re-opens.
Change it or its design and Copy and Insert as above.
Bug - @Xara, this procedure currently can result an an Error:

Attachment 128680

Workaround
- AT WORST - Delete and repeat the above making the required changes.
- FLEXIBLE - Open its Web Properties > Placeholder > Placeholder > HTML code (body)
Example:

Code:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-antenna-bars-4" width="80" height="80" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ff4500" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <line x1="6" y1="18" x2="6" y2="15" /> <line x1="10" y1="18" x2="10" y2="12" /> <line x1="14" y1="18" x2="14" y2="9" /> <line x1="18" y1="18" x2="18" y2="18.01" /> </svg>

Modifications:
- Change to width="100%" height="100%" - this sizes the icon to the smaller of its Placeholder dimensions.
- Change to a sensible value, e.g., stroke-width="10" produces a nice cloud shape, losing the concept of the original antenna bars.
- Change the colour of the stroke="#ff4500" to a named HTML Common Colour or Hex value.
- Get @Egg to weaponise the SVG Paths.
You could just open the Tabler Icons website directly and pick an Icon and put into a Placeholder...
...I prefer the versatility of the Widget.

(!) Bug - @Xara, please get rid of this IE dependency. Other XWRs you have created now fail in v17.

Acorn
15 January 2021, 07:35 PM
Egg Bramhill

Re: Using Tabler Icons

Okay Acorn you've got me going again!!!

A little used Xara tool is the Xara Widget Generator that is created as a XWR file.

Can you explain the Xara Widget Editor further because I'm lost.

Here is an example for the Tabler Icons:

Code:
<XaraWidget>
<WidgetName>SVG Icon Generator</WidgetName>
<CreateURL>https://tablericons.com</CreateURL>
<BrowserWidth>1280</BrowserWidth>
<BrowserHeight>960</BrowserHeight>
<WidgetHelp>
- Pick your icon and design it
- Click to copy to your Clipboard
- Click on the Insert button.
</WidgetHelp>
</XaraWidget>
Copy this into a file and save as Tabler Icons.xwr.

Is this code in a text file or in a Xara page. Is it js code or CSS? Do you save this xar file as a .xwr ???

I keep my XWRs in a Xara Widgets folder.
15 January 2021, 09:59 PM
Acorn

Re: Using Tabler Icons

Egg, I said 'Generator' not editor. It is an XML file format Xara uses for its Widgets. The extension is XWR. When used it creates the Placeholder code automatically Google maps is one.

You save the text as I described: Tabler Icons.xwr.

I am sorry my instructions have confused.

Acorn
16 January 2021, 01:21 AM
Chris M

Re: Using Tabler Icons

This is how I did it, Egg:

Open Notepad
Copy Acorn's code and paste into Notepad
In Notepad, click File > Save As
Change 'Save as Type' to 'All Files (*.*)'
In 'File Name' type Tabler Icons.xwr
Open Xara and import/drag/drop your new file
16 January 2021, 10:41 AM
Acorn

Re: Using Tabler Icons

@Chris, thank you.

Acorn
16 January 2021, 11:25 AM
Egg Bramhill

1 Attachment(s)

Re: Using Tabler Icons

Thanks Chris. I'd already tried that and got:

I occasionally get this, sometimes even with .xar files! Usually drag / drop on the title bar loads it but not this time.

@Acorn I'm very easily confused these days.
16 January 2021, 01:49 PM
Acorn

Re: Using Tabler Icons
Quote:

Originally Posted by Egg Bramhill

Thanks Chris. I'd already tried that and got:
I occasionally get this, sometimes even with .xar files! Usually drag / drop on the title bar loads it but not this time.
@Acorn I'm very easily confused these days.

Egg, a XWR file can be handled in four ways:
1. Add it and others through the Local Designs gallery > disc designs.
2. Double-clicking the file.
3. Dragging the file to the title bar.
4. Dragging directly onto the design page.
The first three will all created the Placeholder in the middle of the viewport of your design.
The fourth, which I described, will place the icon where you drop it on the page.

A double-click thereafter will open the Widget for a change/update.

A Widget is therefore a quicker way to manage your design and works in a similar fashion to Right-click > Replace > Image/Symbol, instead it would be Right-click > Edit widget.
For this last part to work the Widget needs to be somewhere permanent and Xara remembers its full path in the design file.

Acorn