Duuzra Icons

This project contains all the custom icons in a font format.

Available Icons

• Side note, gitlab are currently fixing the missing image issue shown below:

The prefix can be changed as stated below, but the following is an example with the default:

<ion-icon name="dz-lock"></ion-icon>

Title	Name	Content Code	Icon
Add Content	dz-add-content	e914
Add Folder	dz-add-folder	e900
Add	dz-add	e922
Addpeople	dz-addpeople	e947
Address Field	dz-address-field	e90b
Adhoc	dz-adhoc	e916
Agenda	dz-agenda	e923
All	dz-all	e95c
Analytics	dz-analytics	e907
Ask A-question	dz-ask-a-question	e937
Attachment	dz-attachment	e917
Audience	dz-audience	e950
Builder	dz-builder	e908
Burger Menu	dz-burger-menu	e93f
Canedit	dz-canedit	e948
Canshare	dz-canshare	e949
Canview	dz-canview	e94a
Control Panel	dz-control-panel	e909
Date Field	dz-date-field	e90c
Delegates	dz-delegates	e924
Desktop	dz-desktop	e940
Directory	dz-directory	e925
Document Gallery	dz-document-gallery	e93a
Document	dz-document	e926
Download	dz-download	e95e
Draganddrop	dz-draganddrop	e95d
Duplicate	dz-duplicate	e901
Edit	dz-edit	e961
Email Field	dz-email-field	e90d
Excelfile	dz-excelfile	e95f
Forms	dz-forms	e927
Grid	dz-grid	e941
Homescreen	dz-homescreen	e902
Hotspots	dz-hotspots	e928
Image Gallery	dz-image-gallery	e93b
Images	dz-images	e929
Info	dz-info	e903
Ipadlandscape	dz-ipadlandscape	e943
Ipadportrait	dz-ipadportrait	e944
Iphonelandscape	dz-iphonelandscape	e945
Iphoneportrait	dz-iphoneportrait	e946
Label Field	dz-label-field	e90e
Languages	dz-languages	e951
Launch	dz-launch	e952
Linked	dz-linked	e962
List	dz-list	e942
Lock	dz-lock	e918
Login	dz-login	e91e
Logout	dz-logout	e915
Mastericon	dz-mastericon	e94b
Multipleradio Field	dz-multipleradio-field	e90f
Navigation	dz-navigation	e92a
New Duuzra	dz-new-duuzra	e958
Next	dz-next	e919
Notes	dz-notes	e938
Notifications	dz-notifications	e91a
Number Field	dz-number-field	e910
Page Builder	dz-page-builder	e92b
Pdffile	dz-pdffile	e959
Polls	dz-polls	e92c
Presentation Gallery	dz-presentation-gallery	e93c
Presentation	dz-presentation	e92d
Previous	dz-previous	e91b
Profile	dz-profile	e90a
Publish	dz-publish	e91c
Push	dz-push	e91d
Ranking	dz-ranking	e963
Refresh	dz-refresh	e933
Results	dz-results	e939
Save	dz-save	e934
Section Break	dz-section-break	e964
Search	dz-search	e935
Security Lock	dz-security-lock	e953
Security Pin	dz-security-pin	e954
Security Url	dz-security-url	e955
Selected Option-tick	dz-selected-option-tick	e956
Settings	dz-settings	e936
Singleradio Field	dz-singleradio-field	e911
Slider	dz-slider	e965
Style Icons	dz-style-icons	e932
Style List	dz-style-list	e931
Tab Header-permissions	dz-tab-header-permissions	e94c
Tab Header-properties	dz-tab-header-properties	e94d
Table Row-close	dz-table-row-close	e94e
Template	dz-template	e904
Text Field	dz-text-field	e912
Textfile	dz-textfile	e95a
Time	dz-time	e966
Theme	dz-theme	e930
Thrash Delete	dz-thrash-delete	e905
Toggle Field	dz-toggle-field	e913
Toolbox	dz-toolbox	e91f
Unlock Right	dz-unlock-right	e960
Unlock	dz-unlock	e957
Upload	dz-upload	e94f
Upload Image	dz-upload	e967f
Uploading	dz-uploading	e93e
Users	dz-users	e920
Video Gallery	dz-video-gallery	e93d
Video	dz-video	e92e
Visible	dz-visible	e921
Webview	dz-webview	e92f
Worddoc	dz-worddoc	e95b
Zoom	dz-zoom	e906

Development

Environment Setup

To make life easier during development you can use the npm link functionality. This will create a symbolic link between the target and dependent projects and will save you from having to push and pull every change. It will create a dependency to a local package without modifying package.json, you will also be able to modify the files of the package directly through the dependent application.

Given a folder structure similar to this:

duuzra
    duuzra_icons
        ...
    duuzra_app
        ...

navigate to the duuzra_app directory and run:

npm link ../duuzra_icons

This will then create the link between the types and app projects, you can verify this by going into the node_modules folder in the app and looking for @duuzra/icons. Any changes made to the icons project will be immediately reflected in the app project. Obviously this is not suitable for release, the normal method of linking is required here.

To remove the link, run the following:

npm rm @duuzra/icons

If the link still appears, then remove globally too:

npm rm -g @duuzra/icons

Important: If you have configured the npm link, deleting the node modules folder of the dependent application will also delete the files from the linked package. Be sure to unlink the package before deleting. A good process would be to only use the npm link when actively changing the icons project. As soon as the changes have been pushed to the repo, run the unlink command.

Building

Project Setup

Add the following to the package.json, it should be placed just above @duuzra/types in the devDependencies:

    "@duuzra/icons": "^1.0.*",

NPM install afterwards to make sure you get the latest icons. Running npm update will check for the latest version of both @duuzra/icons and @duuzra/types.

Create a config folder at the root of the project. Copy the following files into the new config folder:

node_modules/@ionic/app-scripts/config/copy.config.js
node_modules/@ionic/app-scripts/config/sass.config.js

This will allow us to modify the Ionic 2 build script to add in our new fonts. Edit copy.config.js and add the following to the bottom of the module.exports:

  copyDuuzraFonts: {
    src: ['{{ROOT}}/node_modules/@duuzra/icons/src/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  }

Edit sass.config.js and add the following to the bottom of the includePatohs:

    'node_modules/@duuzra/icons/src'

Then add the following to package.json, this should be added below "scripts":

  "scripts": {
    ...
  },
  "config": {
    "ionic_copy": "./config/copy.config.js",
    "ionic_sass": "./config/sass.config.js"
  },

SCSS Setup

Your project should now be copying the duuzra font and giving WebPack access to the @duuzra/icons scss. To add the icons to your Ionic 2 project you will need to add the following to the theme/variables.scss file:

$duuzra-font-path: "../assets/fonts";
$duuzra-prefix: "dz";
@import "duuzra.icons";

This should be added before the ionic.ionicons import.

IcoMoon

We use IcoMoon for the font generation. Import a new project, select src/Duuzra.json and load that project. Once the project has been uploaded, click on load.

Import SVG's to Set.

NB: the SVG filename will be the icon name, do not use spaces!

Once happy with the selected icons, generate font. Download the Zip file, extract the contents to a temporary folder. Replace the font files from the src/fonts directory with those from the temporary directory. Open the style.scss file and use the hash after the font file names, replacing the hash in the src/duuzra.icons.scss

Go back into the Projects on IcoMoon and download the project: Duuzra.json, replace the file in src/Duuzra.json.

Follow the regex instructions below.

Regex Replace

Sort IcoMoon scss variables: Sorter

Copy the contents of variables.scss from the temporary folder, excluding the header, sort the list using the above url. Copy the sorted list and paste it into a temporary scss file in VSCode and also replace the contents of src/variables.scss making sure you keep the header information.

In VSCode, do a find and replace on the temporary file:

# Find
(\$duuzra-icon-)([\S]+):\s[\S]+\n

# Replace
    &.ion-ios-#{$duuzra-prefix}-$2:before,\n    &.ion-md-#{$duuzra-prefix}-$2:before,\n    &[name*="#{$duuzra-prefix}-$2"]:before {\n        content: $1$2;\n    }\n\n

Copy the contents into src/icons.scss, replacing the contents inside ion-icon { }.

Undo the changes to the temporary file, now do another find and replace for the README.md file.

Replace the list of variables from IcoMoon into Available Icons Below:

# Find
(\$duuzra-icon-)([\S]+):\s\"([\S]+)";\n
# Replace
|$2|dz-$2|$3|![](./src/png/$2.png)|\n

Now copy the replaced information, open Chrome, bring up the console, enter a grave accent character into the console and then paste the contents of the temporary file, enter another grave accent character and then paste the below:

.replace(/^\|([\w-]+)/gm, function(str) { return '|' + str.replace('|', '').replace('-', ' ').replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }); });

Copy the outputted text, excluing the " marks. Replace the code in the README.md