You need to sign in to do that
Don't have an account?
Taps Mak 12
custom icons are not visible in lightning component
I trying to display custom icon from static resource. I have implemented all the steps correctly but still the icons are not visible
component is :
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<lightning:icon src="/sfsites/c/resource/TrainingHistoryIcon/flexitron.svg#flexitron" size="large" alternativeText="My Custom Icon"/>
</aura:component>
and svg file is:
<svg id="Component_3_8" data-name="Component 3 – 8" xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66">
<g id="Ellipse_9" data-name="Ellipse 9" fill="none" stroke="#75c4d7" stroke-width="1.2">
<circle cx="33" cy="33" r="33" stroke="none"/>
<circle cx="33" cy="33" r="32.4" fill="none"/>
</g>
<g id="flexitron" transform="translate(22.939 16)">
<path id="Path_1" data-name="Path 1" d="M25.11,37.519C26.972,21.166,35.931,16.45,35.931,16.45s2.234,1.753,5.3,4.15c-4.042,4.336-6.9,12-5.477,18a31.564,31.564,0,0,1,.737,8.23H34.4v-2.87A6.217,6.217,0,0,0,33,39.714a6.13,6.13,0,0,0-4.716-2.2C27.08,37.48,25.11,37.519,25.11,37.519Z" transform="translate(-23.497 -14.79)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<ellipse id="Ellipse_1" data-name="Ellipse 1" cx="4.693" cy="4.693" rx="4.693" ry="4.693" transform="translate(0 24.272)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<ellipse id="Ellipse_2" data-name="Ellipse 2" cx="1.613" cy="1.613" rx="1.613" ry="1.613" transform="translate(15.15 30.431)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<ellipse id="Ellipse_3" data-name="Ellipse 3" cx="1.645" cy="1.645" rx="1.645" ry="1.645" transform="translate(3.049 27.321)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_2" data-name="Path 2" d="M39.83,52.91h1.629l2.1,2.1" transform="translate(-26.798 -22.967)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_3" data-name="Path 3" d="M46.922,16.978l-2.5-2.079a2.527,2.527,0,0,0-3.568.326L39.84,16.443" transform="translate(-26.8 -14.31)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_4" data-name="Path 4" d="M37.95,37.225S35.8,34.7,36.926,30.019s5.05-10.069,5.05-10.069" transform="translate(-26.073 -15.575)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
</g>
</svg>
I have taken reference from :
https://developer.salesforce.com/docs/component-library/bundle/lightning:icon/documentation
https://salesforce.stackexchange.com/questions/227124/custom-icons-from-static-resource-on-lightningicon-not-working
component is :
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<lightning:icon src="/sfsites/c/resource/TrainingHistoryIcon/flexitron.svg#flexitron" size="large" alternativeText="My Custom Icon"/>
</aura:component>
and svg file is:
<svg id="Component_3_8" data-name="Component 3 – 8" xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66">
<g id="Ellipse_9" data-name="Ellipse 9" fill="none" stroke="#75c4d7" stroke-width="1.2">
<circle cx="33" cy="33" r="33" stroke="none"/>
<circle cx="33" cy="33" r="32.4" fill="none"/>
</g>
<g id="flexitron" transform="translate(22.939 16)">
<path id="Path_1" data-name="Path 1" d="M25.11,37.519C26.972,21.166,35.931,16.45,35.931,16.45s2.234,1.753,5.3,4.15c-4.042,4.336-6.9,12-5.477,18a31.564,31.564,0,0,1,.737,8.23H34.4v-2.87A6.217,6.217,0,0,0,33,39.714a6.13,6.13,0,0,0-4.716-2.2C27.08,37.48,25.11,37.519,25.11,37.519Z" transform="translate(-23.497 -14.79)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<ellipse id="Ellipse_1" data-name="Ellipse 1" cx="4.693" cy="4.693" rx="4.693" ry="4.693" transform="translate(0 24.272)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<ellipse id="Ellipse_2" data-name="Ellipse 2" cx="1.613" cy="1.613" rx="1.613" ry="1.613" transform="translate(15.15 30.431)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<ellipse id="Ellipse_3" data-name="Ellipse 3" cx="1.645" cy="1.645" rx="1.645" ry="1.645" transform="translate(3.049 27.321)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_2" data-name="Path 2" d="M39.83,52.91h1.629l2.1,2.1" transform="translate(-26.798 -22.967)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_3" data-name="Path 3" d="M46.922,16.978l-2.5-2.079a2.527,2.527,0,0,0-3.568.326L39.84,16.443" transform="translate(-26.8 -14.31)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_4" data-name="Path 4" d="M37.95,37.225S35.8,34.7,36.926,30.019s5.05-10.069,5.05-10.069" transform="translate(-26.073 -15.575)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
</g>
</svg>
I have taken reference from :
https://developer.salesforce.com/docs/component-library/bundle/lightning:icon/documentation
https://salesforce.stackexchange.com/questions/227124/custom-icons-from-static-resource-on-lightningicon-not-working
Hi Mak
if both are not working then use <img> tag.
Thanks
The change is only visible in the classic version.
For the Lightning version - a new component must be created.
Did you find a suitable code and can share?