@musora/icons
v1.0.6
Published
A custom svg icon font/library
Downloads
346
Keywords
Readme
Icons - @musora/icons
A custom svg icon font/library
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
- Install the package from NPM or Yarn
npm install @musora/iconsoryarn install @musora/icons - Install the react-native-svg package
- Install the react-native-svg-transformer package
- In your
metro.config.jsfile, 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
- Bump the version number up by 1:
- 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