@sunrise-upc/solar-iconfont v1.0.1

Solar Design System Iconfont

• iconFont

• Setup

  • Installation
  • Folder structure
  • Update Font

• Update icons on web-components

  • Icon component
  • Types

\   \   \  

iconFont

This project was builded to serve the icons used on Solar Design System. The font will be build by the design team using icomoon app and delivered as a zip file with all the font settings.

\  

Description

Intructions to update icon fonts for Solar Design system Solar Design system. The update will be needed also on the Solar web components library.

\  

Setup

Clone the project from the bitbucket repo

Installation

Install dependencies :

~ npm i

Folder structure

• fonts: contains icon-font folder, where are all the font files.
• src: contains settings folder and other settings files.

Update Font

First (to keep all clean) replace the zip file with the new one.

• Extract the new zip file. (this new folder must be deleted after the update is done)

• Create a new bitbucket branch under relase folder (release/new_branch)

• copy the new set of fonts from the extracted zip file(fonts folder content) and placed in the project icon-font folder(replace all the fonts).

• open style.css file located on expanded Zip file, copy the last text of the url fonts/icomoon.eot? and replaced on the file \src\settings\variables\_iconfont.scss.

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?xxxxxx');
  src:  url('fonts/icomoon.eot?xxxxxx#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?xxxxxx') format('truetype'),
    url('fonts/icomoon.woff?xxxxxx') format('woff'),
    url('fonts/icomoon.svg?xxxxxx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

• In the same file styles.css copy the new icons css rules and paste it on the file \src\settings\variables\_icons.scss

• Delete the folder extracted from the new ZIP file.

• run the command below to fix possible css rules.

~ npm run lint:fix

• Commit all the changes and publish the new branch.

• Create a new Pull Request on bitbucket.

• After the Pull Request is acepetd and merged a new version of the font will be release/deployed through a NPM package.

\   \  

Update icons on web-components

To complete the update will be needed to make some changes on the Solar web-components library.

Clone the project from the bitbucket repo and install dependencies

~ npm i

create a new bitbucket branch under 'feature' folder (feature/new_branch)

locate the file index.html under the folder src/ and update the font url with the last version

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sunrise-upc/solar-iconfont@x.x.x/dist/iconFonts.css"/>

\  

Icon component

• Under the folder src/components/icon open the file icon.ts
• Search for initIconFont() method and update the link.href with the last version

  link.href = 'https://cdn.jsdelivr.net/npm/@sunrise-upc/solar-iconfont@x.x.x/dist/iconFonts.css';

• Under the same folder src/components/icon open the file styles.scss

• Add the new icons css rules.

  .icon-new-icon::before {
    content: '\....';
  }

Types

• Under the folder src/components/icon open the file types.ts
• Search for IconCodesEnum const

• Add the new icon Types

  export const IconCodesEnum = {
    NONE: '',
    NEW_ICON_NAME: 'new-icon-name',
    ...
    ...
  }

  commit all changes and publish the new branch, open a new Pull Request.

  After Pull request acceptance it will be merge on the master and deployed.