Introducing React NHL Logos

Inspired by Chris Katsaras' (opens in new tab) React NBA Logos (opens in new tab), I've released a variation for NHL logos. The repository is available on Github (opens in new tab) as well as a NPM package (opens in new tab).

The package includes the primary logos for all 31 NHL teams as well as the NHL shield logo in SVG format available as React components. A few years ago I watched Why Inline SVG is Best SVG (opens in new tab) and it still remains a great explainer for why using inline svgs is better than using the various methods of displaying SVGs (opens in new tab) on a webpage. React NHL Logos (opens in new tab) has a component for each team and NHL logo which outputs an inline SVG making it a breeze to manipulate, animate or alter directly.

Below is part of the README (opens in new tab) for the package which details installation, usage and the available configuration options (there is only one right now) but I have a few more ideas for things like alternate logos that I hope to include in a future release.

Install

$ npm install react-nhl-logos

Usage

import React from 'react'
import { DET } from 'react-nhl-logos'
 
const Example = () => {
  return <DET />
}
 
export default Example

or include all icons

import React from 'react'
import * as NHLLogos from 'react-nhl-logos'
 
const Example = () => {
  return <NHLLogos.DET />
}
 
export default Example

Configuration

Size can be easily configured (Default of 100px)

import React from 'react'
import { DET } from 'react-nhl-logos'
 
const Example = () => {
  return (
    <div>
      <DET size={60} />
      <DET />
      <DET size={140} />
    </div>
  )
}
 
export default Example