1.0.4 • Published 3 years ago
mac-icons-converter v1.0.4
mac-icons-converter
Package that convert chosen divs into macos icons.
Packages install
npm
npm i mac-icons-converter --saveSetup
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"