@alpsfinance/brand NPM

🎉 AlpsFinance Brand Resources

Find all our Brand Resources under the logo folder.

For development use in React applications, you can install @alpsfinance/brand:

# NPM
npm i @alpsfinance/brand

# Yarn
yarn @alpsfinance/brand

and check out all the documentation in our Storybook.

Built with 💙 by Alps Finance.

⚙️ Components
- <Logo />
- <LogoWithText />
📜 License

⚙️ Components

`<Logo />`

Render variety of Alps Logo as a React Component.

Props:

variant: variants of Alps Logo, comprised of 4 enums (BASE, CIRCLE, ROUNDED, SQUARE)
type: type of the variants style for the Alps Logo, for BASE only 1 to 4 is available, others 1 to 12. If larger number is inputted, then it will render Logo with the largest number type.

Note: To see the different types of Alps Logo accordingly to its variant, check out our Storybook

1. Base Logo

import { Logo, AlpsLogoVariant } from "@alpsfinance/brand";

const Component = () => {
    return (
        <Logo variant={AlpsLogoVariant.BASE} type={1}>
    );
};

2. Circle Logo

import { Logo, AlpsLogoVariant } from "@alpsfinance/brand";

const Component = () => {
    return (
        <Logo variant={AlpsLogoVariant.CIRCLE} type={1}>
    );
};

3. Rounded Logo

import { Logo, AlpsLogoVariant } from "@alpsfinance/brand";

const Component = () => {
    return (
        <Logo variant={AlpsLogoVariant.ROUNDED} type={1}>
    );
};

4. Square Logo

import { Logo, AlpsLogoVariant } from "@alpsfinance/brand";

const Component = () => {
    return (
        <Logo variant={AlpsLogoVariant.SQUARE} type={1}>
    );
};