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
import '@musora/icons/dist/icons.css';
Using the SVGs in React Native
- 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
- Run the above command
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