Progress ring as icon

Third party integrations
,
1

Hi,

I’m trying to creating my first integration (so please be gentle…).

My goal is to make a progress ring icon (100 svg’s) that will fill from 0 to 100. When an entity state (number) changes it will automatically fill the ring.

What I already have:

Config/custom_components/hapr_icons/init.py:

async def async_setup(hass, config):
return True

Config/custom_components/hapr_icons/manifest.json:

{
  "domain": "hapr_icons",
  "name": "Progress Ring icons for Home Assistant",
  "version": "1.0",
  "requirements": [],
  "dependencies": [],
  "codeowners": ["@rwzdoorn"]
}```

Config/www/hapr_icons/hapr_icons.js:

(function() {
  console.log(
	"%c%%%cHA PROGRESS-RINGS%c 0.0.9",
	"background: white; color: black; padding: 2px 4px; font-weight: bold;",
	"background: #4B0082; color: white; padding: 2px 4px; font-weight: bold;",
	"background: black; color: white; padding: 2px 4px; font-weight: bold;"
  );

	const iconSet = {
		"hapr:0": "/local/hapr_icons/hapr_0.svg",
		"hapr:1": "/local/hapr_icons/hapr_1.svg",
		"hapr:2": "/local/hapr_icons/hapr_2.svg",
		"hapr:10": "/local/hapr_icons/hapr_10.svg",
		"hapr:20": "/local/hapr_icons/hapr_20.svg",
		"hapr:30": "/local/hapr_icons/hapr_30.svg",
		"hapr:40": "/local/hapr_icons/hapr_40.svg",
		"hapr:50": "/local/hapr_icons/hapr_50.svg",
		"hapr:60": "/local/hapr_icons/hapr_60.svg",
		"hapr:70": "/local/hapr_icons/hapr_70.svg",
		"hapr:80": "/local/hapr_icons/hapr_80.svg",
		"hapr:90": "/local/hapr_icons/hapr_90.svg",
		"hapr:100": "/local/hapr_icons/hapr_100.svg"
		// more will be placed later..
	};

	window.customIconsets = window.customIconsets || {};
	  window.customIconsets["hapr"] = {
		getIcon: function(name) {
		  const url = iconSet[name];
		  if (!url) {
			// This ensures we throw an error if the icon doesn't exist in iconSet.
			throw new Error(`Icon "${name}" not found in hapr iconSet`);
		  }
		  return fetch(url).then((response) => {
			if (!response.ok) {
			  throw new Error(`Icon "${name}" not found on server`);
			}
			return response.text();
		  });
		}
	  };
	})();

Config/www/hapr_icons/hapr_{NUMBER}.svg:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3C13.1819 3 14.3522 3.23279 15.4442 3.68508C16.5361 4.13738 17.5282 4.80031 18.364 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4441 20.3149C14.3522 20.7672 13.1819 21 12 21" stroke="black" stroke-width="2" stroke-linecap="round"/>
</svg>

The javascript HAPR is loaded, but I don’t see the image as an icon. When I test it with an entity_picture it shows the image correct.

What am I doing wrong?