https://discord.umbraco.com logo
Powered by
GitHub - Ambertvu/Umbraco.Community.Icon...
# news
a
Happy to announce my first package! Originally build it for an own project. But now its out for the public! Currently only for V13, but started work on a v17 version already! Description should supply all that is needed: https://github.com/Ambertvu/Umbraco.Community.IconPicker
d
Hey @Ambert this looks very interesting. I was recently looking at the Thumbnail picker for Block Grid and realised if I want 'true icons' i.e. one that can be coloured, I would have to set them on the element type. Setting them by picking an SVG Icon works but you lose the 'colour' ability. Have you got use cases or examples of your package in action?
a
Im working on that readme
And if you run the project you have an example included
Copy code
html
  <div>
     <h2>Icon Picker</h2>
     <strong>Model.Icon.Name -> Returns the icon name</strong> <br/>@Model.Icon.Name<br/><br/>
     <strong>Model.Icon.GetFullPath() -> Returns the path to the sprite, including the fragment identifier (e.g. "/icons.svg#icon-name")-> </strong><br/> @Model.Icon.GetHref()<br/><br/>
      <strong>Model.Icon.ToSvgTag() -> Returns the full SVG markup tag for this icon.</strong><br/> @Model.Icon.ToSvgTag()<br/><br/>
       <strong>Example usage:</strong><br/>
       <svg aria-hidden="true">
           <use xlink:href="@Model.Icon.GetHref()" />
       </svg>
       <svg><use href="@Model.Icon.GetHref()" /></svg>

       @Html.Raw(Model.Icon.ToSvgTag())
 </div>
Copy code
html
<svg aria-hidden="true">
                        <use xlink:href="/svgsprites/example-sprite.svg#address-card-svgrepo-com"></use>
                    </svg>
So yea, this is a 'true icon' which you can use Fill to color it
Now that I read it again... hmm, theoretically you oculd extend it so setting a colour in the backoffice is possible too
Currently its mainly for frontend, so you can easily select an icon and apply the same Fill in css on it
21 Views
PreviousNext
Powered by