infineon-icons

Include SVG Icons from Infineon's Icon Library into your project
Explore the docs »

View Demo · Report Bug · Request Feature · Request Icons

Table of Contents

1. About The Project
   • Built With
2. Getting Access to Infineons Github Repository
   • Creating GitHub Account
   • Create + Configure PAT
3. Project configuration
4. Installation
   • Install packages
   • Import Component
   • Create Icon library
5. Usage
6. Contributing
7. License
8. License
9. Contact

About The Project

Simple library containing Infineon's Icons as SVGs: Infineons Icon Library.

(back to top)

Getting Access to Infineons Github Repository

Creating GitHub Account

In order to access the npm packages that are available at github you need to create an github account and contact out github admins (Yushev Artem) to be added to the Infineon Company.

(back to top)

Create + Configure PAT

1. Create PAT follow guide at https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token give token the "read:packages" scope

2. Authorize PAT with Infineon SSO Click on Configure SSO Click on Authorize

3. Set global npm config for your pc

npm config set '//npm.pkg.github.com/:_authToken' '<yourPAThere>'

(back to top)

Project configuration

1. add a file .npmrc to your project root. It should contain @infineon:registry=https://npm.pkg.github.com/ It is considered best practice to keep package configuration on project level. Please note that access configuration should never be added to your source control system, though.

Installation

Install Packages

npm i -S @infineon/infineon-icons

Create Icon Library

create file ./src/plugins/infineonIcons.js

import library from '@infineon/infineon-icons/library';

import {
	cCheck16,
} from '@infineon/infineon-icons';

library.add(
	cCheck16,
);

import this file in your main.js/index.js

import './plugins/infineonIcons'

(back to top)

Usage

Use the icon component in any template. The icon has to be a string matching the icon name in your library. The name can be the original file name from figma or camelCase.

Depending on project language, the following shows how to access the icon and its properties:

import library from '@infineon/infineon-icons/library';

const iconObj = library.getIcon('cCheck16');
const height = iconObj.height;
const width = iconObj.width;
const viewbox = `0 0 ${height} ${width}`;
const pathD = iconObj.svgContent.substring(iconObj.svgContent.indexOf('d=') + 3).split("\"/>")[0];

Include the icon as an SVG into your project:

<svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" viewBox={viewbox}><path fill="currentColor" d={pathD}/></svg>

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Requesting new Icons

If you need new icons that are currently not in our icon library please create an issue in our infineon-icons project here.

If you already have an SVG-Icon you can always just place it in the svg folder at our infineon-icons project and create a pull request.

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Benedikt Kämmerer - [email protected] Tihomir Yanchev - [email protected] Verena Lechner - [email protected]

Project Link: https://github.com/infineon/infineon-icons

(back to top)