A different take on designing a Lovelace UI

Share your Projects!
264

Download icon as SVG

svg
svg1669×1234 830 KB

If you paste that into button-card it will look like this.

1

Rather than fixing it in code we can have a consistent viewbox for all the icons we create or download.

  • Create an empty svg
<svg viewBox="0 0 50 50"></svg>

  • Open both icon and empty svg in illustrator

  • Copy over the icon to the empty svg

  • Resize the icon to fit artboard

2
21400×1007 126 KB

Now, there’s a lot of paths so let’s make it into one with Compound Path with keyboard shortcut cmd + 8 (ctrl + 8)

3
31362×994 72.9 KB

So of course that didn’t work as you picked a complex icon :joy:

Undo that and select everything again and go Pathfinder > Exclude

4

Lets try Compound Path again, we got one path

5
51371×1008 98.1 KB

Save as svg and upload to nano

6
61133×715 65.6 KB

Now we got an SVG file of the icon in:

  • One single path
  • In our viewbox
  • A lot less code

You don’t have to make it into one shape, we can split it into more paths so you can color and animate separate parts.

7
71580×1157 172 KB

In lovelace it looks like this, you can fine tune the size and position.

8

custom_fields:
  icon_cube3d: >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M47.6 8.1v-.4h-.3L19.2 1c-.1 0-.3 0-.4.1L2.6 12.6l-.1.1v29c0 .2.2.5.4.5l28 6.7h.4l16.1-11.6a.76.76 0 0 0 .2-.4V8.1c0 .1 0 0 0 0zm-28.5-6h.4l12.4 3-7 5-5.4-1.3v-.1h-.4L12.3 7l6.8-4.9zm-2.7 29.6h0V37l-.9-.2-.2.8 1 .2v6.8L3.5 41.4V28.1l12.9 3.1v.5zm0-14.4h0v12.9L11 28.8h.4v-1.3h-.8v1.2L3.5 27V13.7l7.2 1.7v.3h.8v-.1l5 1.2v.5zm-5-2.7v-.1H11l-6.8-1.6 6.8-5h.4l7.3 1.7v.4h.8v-.2l4.3 1-4.3 3.1h-.8v.6l-1.9 1.4-5.4-1.3zm7.2 1.7l-.4-.1.2-.2.2.3zM30.4 35h0v12.9l-12.9-3.1V31.9l.3-.2-.1-.1 12.7 3v.4zm0-1.5L19 30.8l.1-.1.5.1.2-.8-.3-.1v-.3h-.8v.4l-.4.3.3.4-1.1-.3V17.5l.3-.2-.1-.1 1 .2v.4h.8v-.2l7.6 1.8 3.3.8v13.3zm.7-14.5l-.3.2L19 16.4l.1-.1.5.1.2-.8-.6-.2-.1.4-.2-.2 6.2-4.4 7.6 1.8v.3h.8v-.1l4.3 1-4.3 3.1h-.8v.6l-.9.6-.5-.1-.2.6zm7.4 23.2h0l-.1.3-6.9 5v-6.2l.5.1.2-.8-.7-.2v-5.3l.3-.2-.3-.5v-.1l.9-.6h.1v-.1l.4.5.5-.4-.2-.3h.4V33l5-3.6v12.8zm0-14.1l-6.7 4.8-.4-.1V20l.9-.6h.1v-.1l6.1-4.4v13.2zm-5-16V12H33l-6.8-1.6L33 5.5h.4l12.4 3-7 5-5.3-1.4zm13 24.3h0l-.1.3-6.9 5v-6.2l.5.1.2-.8-.7-.2v-6.1l7-5v12.9zm0-14.4h0l-.1.3-6.9 5v-6.2l.5.1.2-.8-.7-.2v-6.1l7-5V22zM34.9 34.4l-1.3-.3.2-.8 1.3.3-.2.8zm7.6 1.8l-1.3-.3.2-.8 1.3.3-.2.8zm2.6.7l-1.3-.3.2-.8 1.3.3-.2.8zm-18.9-5.4l1.3.3-.2.8-1.3-.3.2-.8zm3.6 1.7l-1.3-.3.2-.8 1.3.3-.2.8zm-6.2-2.3l1.3.3-.2.8-1.3-.3.2-.8zm-2.5-.6l1.3.3-.2.8-1.3-.3.2-.8zM37.4 35l-1.3-.3.2-.8 1.3.3-.2.8zM8.7 38.2l-.5-.6 1-.7.5.6-1 .7zm4.1-2.9l-.5-.6 1-.7.5.6-1 .7zM4.7 41l-.5-.6 1-.7.5.6-1 .7zm10.1-7.2l-.5-.6 1-.7.5.6-1 .7zm-8.1 5.8l-.4-.6 1-.7.5.6-1.1.7zM19.5 4.7h-.8V3.4h.8v1.3zm0 2.7h-.8V6h.8v1.4zM18.7 27h.8v1.3h-.8V27zm0-2.6h.8v1.3h-.8v-1.3zm.8-11.8h-.8v-1.3h.8v1.3zm-.8 6.5h.8v1.3h-.8v-1.3zm0 2.6h.8V23h-.8v-1.3zm8 16.9l-.4-.6 1-.7.5.6-1.1.7zM19.2 43l.5.6-1 .7-.5-.6 1-.7zm1.5-.1l-.5-.6 1-.7.5.6-1 .7zm2-1.4l-.5-.6 1-.7.5.6-1 .7zm6.1-4.3l-.5-.6 1-.7.5.6-1 .7zm4.7-13.4h-.8v-1.3h.8v1.3zm0-2.6h-.8v-1.3h.8v1.3zm0 5.2h-.8v-1.3h.8v1.3zm0 2.6h-.8v-1.3h.8V29zm0 2.6h-.8v-1.3h.8v1.3zm-.8-22.2h.8v1.3h-.8V9.4zm0-2.6h.8v1.3h-.8V6.8zm.8 9.1h-.8v-1.3h.8v1.3zM19.2 38.4l-1.3-.3.2-.8 1.3.3-.2.8zm2.5.6l-1.3-.3.2-.8 1.3.3-.2.8zm11.7 2l1.3.3-.3.7-1.3-.3.3-.7zm3.6 1.7l-1.3-.3.2-.8 1.3.3-.2.8zm-12.7-3.1l-1.3-.3.2-.8 1.3.3-.1.5.9-.7.4.6v-.1l1.3.3-.2.8-1.3-.3.1-.5-.9.7-.4-.6v.1zm5.1 1.2l-1.3-.3.2-.8 1.3.3-.2.8zM13 36.1l1.3.3-.2.8-1.3-.3.2-.8zm-2.4-24.3h.8v1.3h-.8v-1.3zm0 5.3h.8v1.3h-.8v-1.3zm0-7.9h.8v1.3h-.8V9.2zm.8 24.9h-.8v-1.3h.8v1.3zm-.8-9.2h.8v1.3h-.8v-1.3zm.8 6.6h-.8v-1.3h.8v1.3zm-.7 5.2l-.5-.6.3-.2v-.4h.7v.1l.2.2h.2v.2h-.1l-.1.5-.5-.1-.2.3zm10.4-20.8l1.3.3-.2.8-1.3-.3.2-.8zm2.5.6l1.3.3-.2.8-1.3-.3.2-.8zm21.5 6l-1.3-.3.2-.8 1.3.3-.2.8zm-2.6-.6l-1.3-.3.2-.8 1.3.3-.2.8zm-16.3-4.8l1.3.3-.2.8-1.3-.3.2-.8zm2.5.7l1.3.3-.2.8-1.3-.3.2-.8zm8.7 2.9l-1.3-.3.2-.8 1.3.3-.2.8zm-2.5-.7l-1.3-.3.2-.8 1.3.3-.2.8zm-20.1-.6l-.5-.6 1-.7.5.6-1 .7zm-7.5 4.5l.5.6-1 .7-.5-.6 1-.7zm2-1.5l.5.6-1 .7-.5-.6 1-.7zm-4 2.9l.5.6-1 .7-.6-.6 1.1-.7zm7.5-4.4l-.5-.6 1-.7.5.6-1 .7zm-1.5.1l.4.6-1 .7h.6v1.3h-.8v-1.3h.1l-.4-.6 1.1-.7h-.7v-1.3h.8l-.1 1.3z"/></svg>
styles:
  custom_fields:
    icon_cube3d:
      [fill: green, top: 7%, left: 10%, width: 3.5vw, position: absolute]
26 Likes