Giter VIP home page Giter VIP logo

umbraco.svgiconpicker's Introduction

SVG Icon Picker for Umbraco

A picker, for picking icons from an SVG spritesheet.

Setup

Install Dependencies

npm install -g grunt-cli
npm install

Build

grunt

Watch

grunt watch

Install in Umbraco

Build the package through Grunt.

grunt package

Then upload the created zip file in /pkg/umbraco in the local package installer in Umbraco. Or install it through the package repository.

How to use

Pick SvgIconPicker as the editor for your desired icon property.

Type the path to your SVG spritesheet in the configuration.

On the document where you put the editor, it works just like the built in media picker mixed with the icon picker. You can filter icons, by searching the icons id. Select an icon by clicking it.

The selected icons id is saved as a string in the property value.

#h5yr

@warrenbuckley for his Yeoman Umbraco generator https://github.com/warrenbuckley/generator-umbraco

umbraco.svgiconpicker's People

Contributors

bjarnef avatar lynnefinnigan avatar skttl avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar

Forkers

arnoldv bjarnef lynnewritescode maven-mj mistyn8

umbraco.svgiconpicker's Issues

NuGet package

Any change you can create a NuGet package for this?

Maybe it could also be an option to decide whether to use svg spritesheet or just svg icons from a folder.
E.g. if path ends with .svg use sprite sheet otherwise look for .svg extensions in folder path.

Option to use folder of svgs

From @bjarnef

Maybe it could also be an option to decide whether to use svg spritesheet or just svg icons from a folder.
E.g. if path ends with .svg use sprite sheet otherwith look for .svg extensions in folder path.

Dialog title is never set 

if (!$scope.model.title) {
      $scope.model.title = localizationService.localize(
        'defaultdialogs_selectIcon'
      );
}

The title never gets set, I think this is to do with the localization service in umbraco 8. So currently the title in the dialog just appears like this:

image

SVG icon preview is too small

I have used your package for a project, but the svg icon preview seems to be too small.

image

Maybe change to this instead and ensure icon is centered horizontally.

image

image

not working on Umbraco 8, but have a fix

The package was causing issues on Umbraco 8!
The fix is in the class used on the svg.icon.picker.html!
It needs to be updated from "umb-editor" to "umb-property-editor" and the problem is fixed!

v0.1.0 package contains extra temp files/folders

Hi @skttl,

The v0.1.0 package contains a bunch of extra temp files/folder that get extracted into the root of the website (once the package is installed).

I think maybe you had some temp/test files left over on your machine and the Grunt task included them in the package build.

Here are the extra files that get referenced in the "package.xml"...

    <files>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/0a5e548c-9f02-f61e-20a2-95529e36e848.js</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/2896a89b-dfc4-ec9a-03bb-fd7214026a96.manifest</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/49809dfd-24ee-1dbb-f283-0e7703da47a7.css</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/4a6dc964-f571-93f5-d4cc-605cca1320ac.html</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/52771ec7-ba32-b5f3-d3a3-b4182c89ca6a.html</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/74d16b84-6adb-e9ae-1a29-b3e8c4e2969a.js</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/93fcaea9-6b54-4625-5f6d-e22290dca4be.html</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/a6591015-d4ca-af38-d49a-a660f7bd4efb.css</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/aa76c29b-2f7f-581c-9119-46fb49c5a42d.html</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/bc372485-42ee-e050-54c9-a21433ebbd91.js</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/bdff718e-d349-de9b-42ba-c52a4667a080.html</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/c221a5b3-5a52-68d2-8f15-55dc33e50205.manifest</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/c3c650d3-a286-8fd0-d816-05047b2bafdb.css</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/c4c6f727-12e4-b9f7-7754-714190c25e84.manifest</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/d5a91bc8-dab8-52b4-fd84-1d78bf4fd60d.html</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/d5f50a98-582d-3440-0bc2-27bc7e0448a6.css</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/d6029696-f354-af85-0c17-ac2c063bfeb8.js</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/dc8bdfba-3a98-fadd-4914-239c092388d6.html</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/de87983e-9bdc-4a6a-206d-d14f92ddc28b.html</file>
      <file>/01ccc558-dc4e-33ce-d320-8600ce156fe3/e57e3d76-ebd7-314a-aaae-f853949e5435.manifest</file>
      <file>/31c69504-2d69-621d-22f4-d7d64b9159af/11ef47ec-7457-db2b-0e7b-17265a50b4be.css</file>
      <file>/31c69504-2d69-621d-22f4-d7d64b9159af/3ed8399e-072e-b99e-f7dd-220686c5d002.html</file>
      <file>/31c69504-2d69-621d-22f4-d7d64b9159af/490ce346-e02c-996e-3ef0-d55640446fe9.manifest</file>
      <file>/31c69504-2d69-621d-22f4-d7d64b9159af/625e2459-0f4e-f184-e2ed-924782f00b5e.html</file>
      <file>/31c69504-2d69-621d-22f4-d7d64b9159af/b67c8301-c2a2-11a6-2ee0-691b987f5d7c.js</file>
      <file>/31c69504-2d69-621d-22f4-d7d64b9159af/ba6a18ac-d531-07d7-6309-060655d39452.manifest</file>
      <file>/31c69504-2d69-621d-22f4-d7d64b9159af/ce0e73f5-09f6-ab9b-2157-4c98827c0e5a.css</file>
      <file>/31c69504-2d69-621d-22f4-d7d64b9159af/ddcc3471-ab93-f997-b815-1bb038451344.html</file>
      <file>/31c69504-2d69-621d-22f4-d7d64b9159af/ea92baae-0b4c-d604-10d3-278b045bcbfb.js</file>
      <file>/31c69504-2d69-621d-22f4-d7d64b9159af/eeb38836-8cdf-a74b-8afb-87e0c87c32a9.html</file>
      <file>/9d7a4516-dec7-3683-7b94-a0976ce17adc/1978dfbf-6513-ddb8-b0de-f0638d32999e.html</file>
      <file>/9d7a4516-dec7-3683-7b94-a0976ce17adc/381e9598-e6c0-cfa7-233d-0b57b3146db6.manifest</file>
      <file>/9d7a4516-dec7-3683-7b94-a0976ce17adc/5cbc6b0b-1a3d-11a9-d3d6-8ecf3139e3c8.html</file>
      <file>/9d7a4516-dec7-3683-7b94-a0976ce17adc/a1c87932-ebfe-fc7b-5fc6-908af1a51aa9.css</file>
      <file>/9d7a4516-dec7-3683-7b94-a0976ce17adc/ed19be13-1f64-0943-556d-8562339cf9ba.js</file>
      <file>/App_Plugins/SvgIconPicker/css/svg.icon.picker.css</file>
      <file>/App_Plugins/SvgIconPicker/js/svg.icon.picker.js</file>
      <file>/App_Plugins/SvgIconPicker/package.manifest</file>
      <file>/App_Plugins/SvgIconPicker/views/svg.icon.picker.dialog.html</file>
      <file>/App_Plugins/SvgIconPicker/views/svg.icon.picker.html</file>
    </files>

You probably need to check your local folders and re-run the build script for a patch release.

I hope this helps?

NuGet package can't be installed on .NET 4.5

It seems the NuGet package it target on .NET 4.6.1, so it doesn't install on projects with target frameworks set to a lower version.
https://www.nuget.org/packages/skttl.Umbraco.SvgIconPicker/1.1.1

It has set a dependency on UmbracoCms.Core > 7.4.0, but it should be fine to built the NuGet package for .NET 4.5

Furthermore there a NuGet package v1.1.1, but only a v1.1.0 package on Our https://our.umbraco.com/packages/backoffice-extensions/svg-icon-picker/

Not sure what has changed from v1.1.0 to v1.1.1?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.