1.1.264 • Published 8 months ago

@fluentui/svg-sprites v1.1.264

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

Fluent UI System Icons (svg)

This package provides the Fluent UI System Icons as SVG sprites, which allow user agents to request and cache icons at runtime instead of depending on this project monolithically.

Usage

For security reasons, most user agents require the sprites to be served from the same hostname, protocol and port. During development, requests can be proxied to a specific release on e.g. jsdelivr which you have vetted for integrity, a bucket in the cloud, or served from the service’s file system.

For Storybook, middleware.js allows the configuration of http-proxy-middleware like so:

const { createProxyMiddleware } = require('http-proxy-middleware')

const expressMiddleWare = (router) => {
  router.use(
    '/sprites',
    createProxyMiddleware({
      target: 'http://cdn.jsdelivr.net/npm/@fluentui/svg-sprites',
      changeOrigin: true,
      followRedirects: true,
    })
  )
}

module.exports = expressMiddleWare

Sprites can then be consumed by the client like so:

export const Icon = (props: IconProps) => {
  const { icon, variant = 'regular', size = 20 } = props
  const assetId = `${icon}_${size}_${variant}`
  return (
    <svg>
      <use href={`/sprites/${assetId}.sprite.svg#${assetId}`} />
    </svg>
  )
}
1.1.264

8 months ago

1.1.263

9 months ago

1.1.262

9 months ago

1.1.261

9 months ago

1.1.260

9 months ago

1.1.259

10 months ago

1.1.258

10 months ago

1.1.257

10 months ago

1.1.256

11 months ago

1.1.254

11 months ago

1.1.253

11 months ago

1.1.252

12 months ago

1.1.251

12 months ago

1.1.250

12 months ago

1.1.255

11 months ago

1.1.243

1 year ago

1.1.242

1 year ago

1.1.241

1 year ago

1.1.249

12 months ago

1.1.248

12 months ago

1.1.247

1 year ago

1.1.246

1 year ago

1.1.245

1 year ago

1.1.244

1 year ago

1.1.240

1 year ago

1.1.239

1 year ago

1.1.238

1 year ago

1.1.237

1 year ago

1.1.236

1 year ago

1.1.235

1 year ago

1.1.234

1 year ago

1.1.233

1 year ago

1.1.232

1 year ago

1.1.231

1 year ago

1.1.229

1 year ago

1.1.230

1 year ago

1.1.228

1 year ago

1.1.227

1 year ago

1.1.226

1 year ago

1.1.225

1 year ago

1.1.224

2 years ago

1.1.219

2 years ago

1.1.221

2 years ago

1.1.220

2 years ago

1.1.223

2 years ago

1.1.222

2 years ago

1.1.209

2 years ago

1.1.208

2 years ago

1.1.210

2 years ago

1.1.218

2 years ago

1.1.217

2 years ago

1.1.216

2 years ago

1.1.215

2 years ago

1.1.214

2 years ago

1.1.212

2 years ago

1.1.211

2 years ago

1.1.207

2 years ago

1.1.206

2 years ago

1.1.205

2 years ago

1.1.204

2 years ago

1.1.203

2 years ago

1.1.202

2 years ago

1.1.201

2 years ago

1.1.200

2 years ago

1.1.199

2 years ago

1.1.198

2 years ago

1.1.197

2 years ago

1.1.196

2 years ago

1.1.195

2 years ago

1.1.194

2 years ago

1.1.193

2 years ago

1.1.192

2 years ago

1.1.191

2 years ago

1.1.190

3 years ago

1.1.188

3 years ago

1.1.187

3 years ago

1.1.186

3 years ago

1.1.189

3 years ago

1.1.185

3 years ago

1.1.184

3 years ago

1.1.183

3 years ago

1.1.182

3 years ago

1.1.181

3 years ago

1.1.177

3 years ago

1.1.176

3 years ago

1.1.175

3 years ago

1.1.174

3 years ago

1.1.173

3 years ago

1.1.179

3 years ago

1.1.178

3 years ago

1.1.172

3 years ago

1.1.171

3 years ago

1.1.170

3 years ago