Icon library for use in LDaCA projects. Can be viewed here.
- public
- login
- loginplus
- writtenlanguage
- spokenlanguage
- signedlanguage
- conformsto
- binderlink
- Ensure you have NPM installed
- Navigate to your project root
- Run
npm i manku-icon-lib
- Use the icons as you would any svg, controlling the size using the width and height attributes and the color with the fill attribute.
You can view a Vue Example for an example of Vue project implementation.
- Navigate to the root of your Vue project
- Install the vite svg loader
npm i vite-svg-loader
and follow the Setup process - Within your vue project, navigate to your assets folder
- Install the icon library by running
npm i manku-icon-lib
in the terminal. - Add an import statement at the top of your .vue file,
import { MankuIcon } from 'manku-icon-lib';
- Create a MankuIcon component with a
name
property that equals the icons filename and add propertiessize
to control the size andcolor
to control the color e.g.<MankuIcon name="Login" size="200" color="blue"/>
.
Vue Project Implementation
Vue Code
- The styling of the icons can be changed either in a css class that can be applied to the Vue component or the styling can be directly applied to the vue component.
- The color of an icon can be changed using
color: ;
e.g.color: red;
- By default an icons will fill it's container, the size of an icon can be changed by using
width: ;
andheight: ;
values, e.g.width: 100px;
- Clone the repository
- Add icon to the repository
lib\assets\icons\
- Request to merge the new icon into the repository
- Navigate to the root directory
- Increase the "version" in package.json
- Add changes to git, commit, pull and push to main
- Run
npm run build
- Run
npm publish
To use the example app
npm run build
cd example-app-using-manku
npm install
npm run dev