0
# Quasar Extras
1

2
Quasar Extras provides a comprehensive collection of web fonts, icons, and animations specifically curated for the Quasar Framework ecosystem. It includes popular icon libraries, the Roboto font family, and Animate.css animations with streamlined delivery and testing.
3

4
## Package Information
5

6
- **Package Name**: @quasar/extras
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install @quasar/extras`
10

11
## Core Imports
12

13
### Icon Libraries (SVG)
14

15
```javascript
16
// Material Icons
17
import { matHome, matSettings, matAdd } from "@quasar/extras/material-icons";
18

19
// Material Design Icons (MDI)
20
import { mdiAccount, mdiAlert, mdiHome } from "@quasar/extras/mdi-v7";
21

22
// FontAwesome
23
import { fasHome, fabFacebook, farUser } from "@quasar/extras/fontawesome-v6";
24

25
// Other libraries follow similar patterns
26
import { iconName } from "@quasar/extras/bootstrap-icons";
27
import { iconName } from "@quasar/extras/eva-icons";
28
import { iconName } from "@quasar/extras/ionicons-v8";
29
```
30

31
### Webfont CSS
32

33
```css
34
/* Import CSS for webfont usage */
35
@import '@quasar/extras/material-icons/material-icons.css';
36
@import '@quasar/extras/mdi-v7/mdi-v7.css';
37
@import '@quasar/extras/fontawesome-v6/fontawesome-v6.css';
38
```
39

40
### Animations
41

42
```javascript
43
import { 
44
  generalAnimations, 
45
  inAnimations, 
46
  outAnimations 
47
} from "@quasar/extras/animate/animate-list.common";
48
```
49

50
For CommonJS:
51

52
```javascript
53
const { matHome } = require("@quasar/extras/material-icons");
54
const { mdiAccount } = require("@quasar/extras/mdi-v7");
55
const { generalAnimations } = require("@quasar/extras/animate/animate-list.common");
56
```
57

58
## Basic Usage
59

60
### SVG Icon Usage in Quasar
61

62
```javascript
63
import { matHome, matSettings } from "@quasar/extras/material-icons";
64

65
// In Vue component
66
<template>
67
  <q-icon :name="homeIcon" />
68
  <q-btn :icon="settingsIcon" />
69
</template>
70

71
<script>
72
export default {
73
  created() {
74
    this.homeIcon = matHome;
75
    this.settingsIcon = matSettings;
76
  }
77
}
78
</script>
79
```
80

81
### Webfont Usage
82

83
```html
84
<!-- After importing CSS -->
85
<i class="material-icons">home</i>
86
<i class="mdi mdi-account"></i>
87
<i class="fas fa-home"></i>
88
```
89

90
### Animation Usage
91

92
```javascript
93
import { inAnimations } from "@quasar/extras/animate/animate-list.common";
94

95
// Use with CSS classes
96
const fadeInClass = inAnimations[8]; // "fadeIn"
97
```
98

99
## Architecture
100

101
Quasar Extras is organized around several key concepts:
102

103
- **Multi-format Support**: Each icon library provides SVG exports (for programmatic use) and webfonts (for CSS styling)
104
- **Version Management**: Multiple versions of popular libraries (MDI, FontAwesome, Ionicons) for compatibility
105
- **Optimized Assets**: Streamlined files with unnecessary assets removed for faster downloads
106
- **TypeScript Integration**: Full type definitions for all SVG exports
107
- **Quasar Integration**: Seamless integration with Quasar's component system and build tools
108

109
## Capabilities
110

111
### Material Icons
112

113
Google's official Material Design icons with multiple style variants and comprehensive SVG exports.
114

115
```typescript { .api }
116
// SVG exports - each icon as string constant
117
export declare const matHome: string;
118
export declare const matSettings: string;
119
export declare const matAdd: string;
120
// ... 2100+ more icons
121
```
122

123
[Material Icons](./material-icons.md)
124

125
### Material Symbols
126

127
Google's newer Material Symbols collection with updated designs and expanded icon set beyond Material Icons.
128

129
```typescript { .api }
130
// SVG exports - Material Symbols variants
131
export declare const matSymbolOutlined: string;
132
export declare const matSymbolRounded: string; 
133
export declare const matSymbolSharp: string;
134
// ... expanded Material Symbols set
135
```
136

137
Also covered in [Material Icons](./material-icons.md)
138

139
### Material Design Icons (MDI)
140

141
Extended Material Design icon collection from the community with multiple versions available.
142

143
```typescript { .api }
144
// SVG exports - each icon as string constant  
145
export declare const mdiAccount: string;
146
export declare const mdiAlert: string;
147
export declare const mdiHome: string;
148
// ... thousands more icons
149
```
150

151
[Material Design Icons](./mdi.md)
152

153
### FontAwesome Icons
154

155
Popular icon library with multiple styles (solid, regular, light, brands, duotone).
156

157
```typescript { .api }
158
// SVG exports - categorized by style
159
export declare const fasHome: string;      // Solid
160
export declare const farUser: string;      // Regular  
161
export declare const fabFacebook: string;  // Brand
162
// ... hundreds more icons per style
163
```
164

165
[FontAwesome Icons](./fontawesome.md)
166

167
### Ionicons
168

169
Ionic Framework's icon library with multiple versions for compatibility.
170

171
```typescript { .api }
172
// SVG exports - each icon as string constant
173
export declare const ionHome: string;
174
export declare const ionSettings: string;
175
export declare const ionAdd: string;
176
// ... hundreds more icons
177
```
178

179
[Ionicons](./ionicons.md)
180

181
### Additional Icon Libraries
182

183
Bootstrap Icons, Eva Icons, Themify Icons, and Line Awesome icon libraries.
184

185
```typescript { .api }
186
// Bootstrap Icons  
187
export declare const biHouse: string;
188
export declare const biGear: string;
189

190
// Eva Icons
191
export declare const evaHome: string;
192
export declare const evaSettings: string;
193

194
// Themify Icons
195
export declare const tiHome: string;
196
export declare const tiSettings: string;
197

198
// Line Awesome
199
export declare const lasHome: string;
200
export declare const lasUser: string;
201
```
202

203
[Additional Icon Libraries](./additional-icons.md)
204

205
### Roboto Font
206

207
Google's Roboto font family optimized for Material Design interfaces.
208

209
```css { .api }
210
/* Font face definition */
211
@font-face {
212
  font-family: 'Roboto';
213
  font-style: normal;
214
  font-weight: 400;
215
  src: url('./web-font/roboto-v20-latin-regular.woff2') format('woff2');
216
}
217

218
/* CSS class */
219
.roboto {
220
  font-family: 'Roboto', sans-serif;
221
}
222
```
223

224
[Roboto Font](./roboto-font.md)
225

226
### Animate.css Integration
227

228
Curated animation class lists from Animate.css for smooth transitions and effects.
229

230
```typescript { .api }
231
export declare const generalAnimations: string[];
232
export declare const inAnimations: string[];  
233
export declare const outAnimations: string[];
234
```
235

236
[Animations](./animations.md)