Icon Module

Icon Module is used to add icons to Logo Elements Design System guide-based web and mobile applications. Our icons depend on the Streamline Icons paid version. For usage, just download and import scss to your project main style.scss is enough. It is so easy to use.

Click here for demo

License

Our licence placed at License file. Please click and read for usage details.

Installation

There are several ways to install Logo Icons to the project.

1. Font Icon

Our icons also can be usable as Font Icon. You can download Font Icon version to your project from here.

2. Bitbucket

1. Download Icons's scss file from Bitbucket.
2. Save as "style-file-name.css"
3. Place it to your assets folder, or where you want
4. Open your main css file.
5. Then add below code for import it to your own css file

@import url("./folder-path/style.css");

3. Npm

This package is private package so we decide to hold it in our own repository. Other side, our all public npm packages is located at https://www.npmjs.com/~logofe.

To install Icons Module throught npm:

1. Set your npm registry to Logo Nexus Repository Manager if not https://dregistry.logo.com.tr/.

$ npm set registry https://dregistry.logo.com.tr/repository/npm-logofe/

2. Please login for authentication, if you are not signed in.

$ npm login

3. At your project call npm install command. This below command will create node_modules folder at same level path.

$ npm install @logo-software/icons -s

4. Then add below code for import it to your own scss file

@import "./node_modules/@logo-software/icons/style";

Usage In Angular Component

Below code sample was created for Angular based applications. Our icon module is not dependent on any platform file. You can use it in every web application.

your-main-style.scss

// import icon style your scss code
@import "~@logo-software/icons/style";

body{}

any.component.html

<!-- this will add search icon to input to right side of it.-->
<button class="le-search icon-right">Right</button>
<!-- this code add search icon to the left side-->
<button class="le-search icon-left">Left</button
  <!-- this code add search icon to the center (default)-->
<button class="le-save">Center</button>

For more detail please visit: Icons Module