<head>
    <link 
        rel="stylesheet" 
        href="https://d1prhhmg8i11jr.cloudfront.net/v1.0.0/dist/icons.css"
    >
</head>
<body>
    <i class="icon-courses"></i>
</body>

Loading from NPM

npm install @musora/icons or yarn install @musora/icons

Using a Javascript file:

import '@musora/icons/dist/icons.css';

Using a CSS file:

@import '~@musora/icons/dist/icons.css';

Keep in mind that your webpack config will need to have the relevant file loaders. Webpack should give you warnings/errors regarding the loaders you need.

Using the SVGs in React Native

Install the package from NPM or Yarn npm install @musora/icons or yarn install @musora/icons
Install the react-native-svg package
Install the react-native-svg-transformer package
In your metro.config.js file, add the following transformer:

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

You can now import the SVG file directly and use it as a component:

import CourseIcon from '@musora/icons/assets/svg/courses.svg';

<CourseIcon width={100} height={100} />

Adding New Icons

Make sure your svg is a 100x100 square and place it in the assets/svg directory
Install the dependencies - yarn install
Generate the Font - yarn font:generate

Deployment to S3

npm version patch - This command will do a few things:
- Bump the version number up by 1: 1.0.0 -> 1.0.1
- Create a commit and tag under that version number
Push the commit and the tag

Note that Travis will only deploy to S3 when you push the tag.

The directory it deploys to will match the version number in the tag

FAQs

What is @musora/icons?

Is @musora/icons popular?

Is @musora/icons well maintained?

Last updated on 06 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install