Apr 8, 2023

Techs Logos

The library designed for developers who want to visually represent their technology stack. Whether you’re building applications with Vue, Angular, or React, Techs Logos allows you to effortlessly integrate technology logos into your projects, providing a modern and professional appearance.

👉 Get started now:

👉 For more information, visit the demos:

Why Choose Techs Logos?

Our libraries streamline the process of displaying technology logos, allowing you to focus on building your application without worrying about sourcing and displaying logos individually. With a wide variety of logos available, you can easily represent your tech stack in a clean and visually appealing manner.

About the Project

Techs Logos is a collaborative project aimed at providing developers with an accessible and attractive way to showcase their technology stack. The libraries for Vue, Angular, and React are designed to integrate seamlessly into your applications, enabling you to customize and display technology logos effortlessly.

Installation

To install Techs Logos for each framework, use the following commands:

For Vue:

npm install vue-techs-logos

For React:

npm install --save react-techs-logos

For Angular:

npm install angular-techs-logos

Usage

Vue

Import the Component

In your Vue component file, import the VueTechsLogos component:
```
import VueTechsLogos from 'vue-techs-logos';
```

Basic Usage Examples

List all logos:
```
<VueTechsLogos />
```
Single icon:
```
<VueTechsLogos name="javascript" />
```

List limited logos:

<VueTechsLogos :list="['vue','javascript', 'react', 'angular']" />

List all logos with hidden logos:

<VueTechsLogos :hiddenLogos="['vue','javascript', 'react', 'angular', 'android']" />

Hidden label:

<VueTechsLogos name="javascript" :hiddenLabel="true" />
<VueTechsLogos :hiddenLabel="true" />

Single change label name:

<VueTechsLogos name="javascript" label="New JavaScript" />

Modification of size component:

<VueTechsLogos name="javascript" size="220px" />

React

Import the Component

In your React component file, import the ReactTechsLogos component:
```
import ReactTechsLogos from 'react-techs-logos';
```

Basic Usage Examples

List all logos:
```
<ReactTechsLogos />
```
Single icon:
```
<ReactTechsLogos name="javascript" />
```

List limited logos:

<ReactTechsLogos list={['vue','javascript', 'react', 'angular']} />

List all logos with hidden logos:

<ReactTechsLogos hiddenLogos={['vue','javascript', 'react', 'angular', 'android']} />

Hidden label:

<ReactTechsLogos name="javascript" hiddenLabel />
<ReactTechsLogos hiddenLabel />

Angular

Import the Module

In your Angular module, import the AngularTechsLogosModule:

import { AngularTechsLogosModule } from 'angular-techs-logos';

@NgModule({
  imports: [ AngularTechsLogosModule ],
})
export class AppModule {}

Basic Usage Examples

List all logos:
```
<angular-techs-logos />
```

Single icon:

<angular-techs-logos name="javascript" />

List limited logos:

<angular-techs-logos [list]="['angular','javascript', 'react', 'angular']" />

List all logos with hidden logos:

<angular-techs-logos [hiddenLogos]="['angular','javascript', 'react', 'angular', 'android']" />

Hidden label:

<angular-techs-logos name="javascript" [hiddenLabel]="true" />
<angular-techs-logos [hiddenLabel]="true" />

Single change label name:

<angular-techs-logos name="javascript" label="New JavaScript" />

Modification of size component:

<angular-techs-logos name="javascript" size="220px" />

Technologies Used

Vue.js
Angular
React
HTML5
CSS3

Made with ❤️