Code Monkey home page Code Monkey logo

plantuml-icon-font-sprites's Introduction

PlantUML Icon-Font Sprites

Getting Started

The common.puml is required for the rest to work.

!include ../common.puml

or via url

!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.2.0
!includeurl ICONURL/common.puml

Import the sprites that you want

!include ../devicons/mysql.puml
!include ../font-awesome/database.puml
!include ../font-awesome-5/database.puml

or via url

!includeurl ICONURL/common.puml
!includeurl ICONURL/devicons/mysql.puml
!includeurl ICONURL/font-awesome/database.puml
!includeurl ICONURL/font-awesome-5/database.puml

To use the sprites add one of the macros

DEV_MYSQL(db)

The macros are prefixed with the set and the name of the icon

<prefix>_<name>(alias)
<prefix>_<name>(alias,label)
<prefix>_<name>(alias,label,shape)
<prefix>_<name>(alias,label,shape,color)

Using the icon from devicons for mysql

DEV_MYSQL(db1)
DEV_MYSQL(db2,label of db2)
DEV_MYSQL(db3,label of db3,database)
DEV_MYSQL(db4,label of db4,database,red) #DeepSkyBlue

overload-example

Icon Sets

The following icon sets are included:

Name Index
Font-Awesome 4 List of macros
Font-Awesome 5 List of macros
Devicons List of macros
Govicons List of macros
Weather List of macros
Material List of macros
Devicon 2 List of macros

Example

@startuml

skinparam defaultTextAlignment center

!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.2.0

!includeurl ICONURL/common.puml
!includeurl ICONURL/devicons/mysql.puml
!includeurl ICONURL/font-awesome/server.puml
!includeurl ICONURL/font-awesome-5/database.puml

title Styling example

FA_SERVER(web1,WEB1) #Green
FA_SERVER(web2,WEB1) #Yellow
FA_SERVER(web3,WEB1) #Blue
FA_SERVER(web4,WEB1) #YellowGreen

FA5_DATABASE(db1,LIVE,database,white) #RoyalBlue
DEV_MYSQL(db2,SPARE,database) #Red

db1 <--> db2

web1 <--> db1
web2 <--> db1
web3 <--> db1
web4 <--> db1

@enduml

styling-example

More examples can be found here

Build

Icons are generated with font-icon-generator

Note

  • All brand icons are trademarks of their respective owners.
  • Thanks to milo-minderbinder for AWS-PlantUML
  • Thanks to yuri-becker for the integration of Devicon 2

Changelog

v2.2.0

  • Updated all except material to latest version
  • Updated material to 3.0.2

v2.1.0

  • Added Devicon 2

v2.0.0

  • Added fa5, weather, gov and material
  • Updated dev and fa to latest version
  • Fixed aspect ratios

v1.0.0

  • Intital release

Enjoy!

plantuml-icon-font-sprites's People

Contributors

ojacques avatar tupadr3 avatar yuri-becker avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.