destiny-icons icon indicating copy to clipboard operation
destiny-icons copied to clipboard

Im unable to view the icons in the link provided

Open Corzah97 opened this issue 1 year ago • 2 comments

Corzah97 avatar Jun 15 '23 11:06 Corzah97

if you are referring to not being able to see icons on GitHub, the icon can be seen as SVG code or a preview icon by using the selector in the top right of each icon.

If you mean that you can't view the icons themselves on your website, you may need to pass width and height values to the SVG code.

Here's an example with the helmet SVG code:

Orginal code

<svg version="1.1" id="helmet_armor" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 51 51">
<path d="M24.77,7.03c-8.15,0.38-14.42,7.41-14.42,15.57v16.06c0,0.23,0.13,0.44,0.34,0.53l10.33,4.68c0.78,0.35,1.66-0.22,1.66-1.07
	v-5.75c0,0,0,0,0,0V31.9c0-0.39-0.19-0.75-0.52-0.97l-5.39-3.64l0,0c-0.87-0.52-1.43-1.5-1.34-2.61c0.13-1.46,1.46-2.52,2.93-2.52
	h4.36c0.65,0,1.17,0.53,1.17,1.17v6.71c0,0,0,0.61,1.61,0.61c1.61,0,1.61-0.61,1.61-0.61v-6.71c0-0.65,0.52-1.17,1.17-1.17h4.36
	c1.47,0,2.8,1.06,2.93,2.52c0.1,1.11-0.47,2.09-1.34,2.61l0,0l-5.39,3.64c-0.32,0.22-0.52,0.58-0.52,0.97v5.16v5.75
	c0,0.85,0.88,1.42,1.66,1.07l10.33-4.68c0.21-0.1,0.34-0.3,0.34-0.53V22.17C40.66,13.56,33.47,6.62,24.77,7.03z"/>
</svg> 

Code with height and width attributes

<svg version="1.1" id="helmet_armor" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 51 51" height="64" width="64">
<path d="M24.77,7.03c-8.15,0.38-14.42,7.41-14.42,15.57v16.06c0,0.23,0.13,0.44,0.34,0.53l10.33,4.68c0.78,0.35,1.66-0.22,1.66-1.07
	v-5.75c0,0,0,0,0,0V31.9c0-0.39-0.19-0.75-0.52-0.97l-5.39-3.64l0,0c-0.87-0.52-1.43-1.5-1.34-2.61c0.13-1.46,1.46-2.52,2.93-2.52
	h4.36c0.65,0,1.17,0.53,1.17,1.17v6.71c0,0,0,0.61,1.61,0.61c1.61,0,1.61-0.61,1.61-0.61v-6.71c0-0.65,0.52-1.17,1.17-1.17h4.36
	c1.47,0,2.8,1.06,2.93,2.52c0.1,1.11-0.47,2.09-1.34,2.61l0,0l-5.39,3.64c-0.32,0.22-0.52,0.58-0.52,0.97v5.16v5.75
	c0,0.85,0.88,1.42,1.66,1.07l10.33-4.68c0.21-0.1,0.34-0.3,0.34-0.53V22.17C40.66,13.56,33.47,6.62,24.77,7.03z"/>
</svg>           

You can also change the color of the icon with the fill attribute! For example, this will make the icon appear red.

<svg version="1.1" id="helmet_armor" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 51 51" height="64" width="64" fill="#ff0000">
<path d="M24.77,7.03c-8.15,0.38-14.42,7.41-14.42,15.57v16.06c0,0.23,0.13,0.44,0.34,0.53l10.33,4.68c0.78,0.35,1.66-0.22,1.66-1.07
	v-5.75c0,0,0,0,0,0V31.9c0-0.39-0.19-0.75-0.52-0.97l-5.39-3.64l0,0c-0.87-0.52-1.43-1.5-1.34-2.61c0.13-1.46,1.46-2.52,2.93-2.52
	h4.36c0.65,0,1.17,0.53,1.17,1.17v6.71c0,0,0,0.61,1.61,0.61c1.61,0,1.61-0.61,1.61-0.61v-6.71c0-0.65,0.52-1.17,1.17-1.17h4.36
	c1.47,0,2.8,1.06,2.93,2.52c0.1,1.11-0.47,2.09-1.34,2.61l0,0l-5.39,3.64c-0.32,0.22-0.52,0.58-0.52,0.97v5.16v5.75
	c0,0.85,0.88,1.42,1.66,1.07l10.33-4.68c0.21-0.1,0.34-0.3,0.34-0.53V22.17C40.66,13.56,33.47,6.62,24.77,7.03z"/>
</svg>           

I hope this helps! Feel free to reach out if you need anything!

tlstommy avatar Jul 29 '23 05:07 tlstommy

The Github pages site was also captured by the Internet Archive back in 2020, it's not the most up-to-date but it may be helpful in the meantime!

https://web.archive.org/web/20201214081059/https://justrealmilk.github.io/destiny-icons/

tlstommy avatar Jul 29 '23 05:07 tlstommy