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-loaderand follow the Setup process - Within your vue project, navigate to your assets folder
- Install the icon library by running
npm i manku-icon-libin 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
nameproperty that equals the icons filename and add propertiessizeto control the size andcolorto 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