Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@musora/icons

Package Overview
Dependencies
Maintainers
3
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@musora/icons

A custom svg icon font/library

  • 1.0.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
73
decreased by-25.51%
Maintainers
3
Weekly downloads
 
Created
Source

Icons - @musora/icons

A custom svg icon font/library

Build Status

Usage

Loading From a CDN
<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
  1. Install the package from NPM or Yarn npm install @musora/icons or yarn install @musora/icons
  2. Install the react-native-svg package
  3. Install the react-native-svg-transformer package
  4. 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

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

Deployment to S3

  1. 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
  2. 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

Package last updated on 18 Dec 2019

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc