mac-icons-converter
Package that convert chosen divs into macos icons.
Packages install
npm
npm i mac-icons-converter --save
Setup
import { Directory, WindowButton } from "mac-icons-converter";
WindowButton.convert();
Directory.convert();React.js
useEffect(() => {
WindowButton.convert();
Directory.convert();
}, []);Directory
setup
import { Directory } from "mac-icons-converter";
Directory.convert();class
class="mac-directory"
Options
| Attribute | Description | Value type | Example |
|---|---|---|---|
| size | the scale of the icon | number | <div class="mac-directory" size="2"></div> |
| fsize | the size of the font | number | <div class="mac-directory" fsize="18"></div> |
| textValue | the text for the icon | String |
<div class="mac-directory" textValue="Hello"></div> or you can pass the text to innerHTML for example <div class="mac-directory">Hello</div>
|
Window buttons
setup
import { WindowButton } from "mac-icons-converter";
WindowButton.convert();class
class="mac-window-btn"
Options
| Attribute | Description | Value type | Example |
|---|---|---|---|
| size | the scale of the icon | number | <div class="mac-window-btn" size="2"></div> |
| type | the size of the font | String | <div class="mac-window-btn" type="exit"></div> |
type
| Type | Example | Picture |
|---|---|---|
| exit | <div class="mac-window-btn" type="exit"></div> |
|
| minimize | <div class="mac-window-btn" type="minimize"></div> |
|
| full-screen | <div class="mac-window-btn" type="full-screen"></div> |
|
Window
setup
import { WindowButton } from "mac-icons-converter";
WindowButton.convert();class
class="mac-window"
Options
| Attribute | Description | Value type | Example |
|---|---|---|---|
| height | the window height | number + measurement | <div class="mac-window" height="500px"></div> |
| width | the window width | number + measurement | <div class="mac-window" width="20vw"></div> |
| windowtitle | the text for the icon | String | <div class="mac-window" windowtitle="window title"></div> |
content
#####you can pass also content with text/element:
<div class="mac-window" height="10%" width="30%" windowtitle="title">Content</div>
<div class="mac-window" height="10%" width="30%" windowtitle="title">
<h1>Content<h1>
</div>Window control panel
setup
import { WindowButton } from "mac-icons-converter";
WindowButton.convert();class
class="mac-window-cpanel"