tv-shopping-lib-npm
TypeScript icon, indicating that this package has built-in type declarations

3.1.4 • Public • Published

Adding icons

In order to include a new icon we have a script to process the icons that removes unnecesary attrs and creates a React Component from svgs.

The steps to add a new icons are: 0- Name your iconName.svg with a short and descriptive file name and remember to prefix it with icon. The file name is used to create the icons as React Components. So, later will be use to invoque the icon: <IconName /> or <Icon name="name"> 1- Add the new iconName.svg into /iconsRaw 2- Execute the script yarn icons 3- Now you are able to use the icon as:

import { Icon } from 'tv-shopping-lib-npm'
import { IconCart } from 'tv-shopping-lib-npm'

const Example = () => {
  return <>
    <Icon name="cart" />
    <IconCart />
  </>
}

Components creation tips

  • Naming interfaces convention: I(interface) + name(component, function, ...) + Props(optional in case of input function parameters). For instance:
interface IButtonProps {
  focused: boolean
  variant: keyof IVariants
  ...
}
  • Naming Types convention: T(type) + name(component, function, prop name, ...). For example:
  type TSize = number | 'auto'
  • To style a focused component, use in styles ':focus' selector like this:
const componentExample = styled.div`
  ...
  &:focus {
    background-color: red;
  }
`

or the class name '.la-focused' like this:

const componentExample = styled.div`
  ...
  &.la-focused {
    background-color: red;
  }
`
  • Typescript + styled-components:
  interface TitleProps {
    readonly isActive: boolean;
  }

  const Title = styled.h1<TitleProps>`
    color: red;
  `;

Readme

Keywords

none

Package Sidebar

Install

npm i tv-shopping-lib-npm

Weekly Downloads

133

Version

3.1.4

License

MIT

Unpacked Size

1.84 MB

Total Files

324

Last publish

Collaborators

  • pacorampas
  • mancas
  • mirframai
  • arnaumarch