@utrecht/icon NPM | npm.io

1.0.0-alpha.541 • Published 3 days ago

Install

Weekly downloads

-

License

EUPL-1.2

Repository

Last release

3 days ago

Iconen in code

Iconen gebruiken als Custom Element

Eén van de makkelijkste manieren om iconen te gebruiken is door ze te includen in de web component library, zodat je ze als custom element kan gebruiken. Elk icoon is beschikbaar als custom element. De naam van van het icoon (utrecht-icon-...) is ook de naam van het custom-element. Voorbeeld:

<div>
  <utrecht-icon-loupe></utrecht-icon-loupe>
</div>

Verander de kleur van het icoon via de CSS-eigenschap color op een parent element of via de custom eigenschap --utrecht-icon-color.

`color` van de omgevings content

Op onderstaande manier kan je het makkelijkst de kleur aanpassen. De kleur van de bestaande tekst zal ook op het icoon toegepast worden.

<button>
  <utrecht-icon-loupe></utrecht-icon-loupe>
  Search
</button>

<style>
  button {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
  }
</style>

`--utrecht-icon-color` als custom icoon kleur

Deze manier is handig als je een klein verschil wilt aanbrengen tussen de tekst kleur en de kleur van het icoon. Het gebruikt een CSS custom property --utrecht-icon-color als de kleur van het icoon.

<button>
  <utrecht-icon-loupe></utrecht-icon-loupe>
  Search
</button>

<style>
  button {
    --utrecht-icon-color: rgba(255, 255, 255, 0.75);
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
  }
</style>

Icoon grootte aanpassen

De grootte van het icoon kan aangepast worden met de --utrecht-icon-size CSS eigenschap:

<button>
  <utrecht-icon-loupe></utrecht-icon-loupe>
  Search
</button>

<style>
  button {
    --utrecht-icon-size: 42px;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
  }
</style>

Overzicht van icons

Wanneer het nodig is een overzicht te hebben van de beschikbare icons, gebruik dan als basis de meegeleverde JSON informatie in dist/index.json. Het bevat een array met onder andere de ID van elke icoon. Op dit moment is de naam van de custom element altijd gelijk aan de ID.

nl-design-system

@everything-registry/sub-chunk-973 @zalastax/nolb-_ut @infinitebrahmanuniverse/nolb-_ut

1.0.0-alpha.541

3 days ago

1.0.0-alpha.540

4 days ago

1.0.0-alpha.539

8 days ago

1.0.0-alpha.538

10 days ago

1.0.0-alpha.537

10 days ago

1.0.0-alpha.536

1 month ago

1.0.0-alpha.535

1 month ago

1.0.0-alpha.534

2 months ago

1.0.0-alpha.533

2 months ago

1.0.0-alpha.532

2 months ago

1.0.0-alpha.531

2 months ago

1.0.0-alpha.530

2 months ago

1.0.0-alpha.529

2 months ago

1.0.0-alpha.528

2 months ago

1.0.0-alpha.527

2 months ago

1.0.0-alpha.526

3 months ago

1.0.0-alpha.525

3 months ago

1.0.0-alpha.524

3 months ago

1.0.0-alpha.523

3 months ago

1.0.0-alpha.522

3 months ago

1.0.0-alpha.521

3 months ago

1.0.0-alpha.520

3 months ago

1.0.0-alpha.519

3 months ago

1.0.0-alpha.518

4 months ago

1.0.0-alpha.517

4 months ago

1.0.0-alpha.516

4 months ago

1.0.0-alpha.515

4 months ago

1.0.0-alpha.514

4 months ago

1.0.0-alpha.513

4 months ago

1.0.0-alpha.512

4 months ago

1.0.0-alpha.511

4 months ago

1.0.0-alpha.510

4 months ago

1.0.0-alpha.509

4 months ago

1.0.0-alpha.508

5 months ago

1.0.0-alpha.507

5 months ago

1.0.0-alpha.506

5 months ago

1.0.0-alpha.505

5 months ago

1.0.0-alpha.504

5 months ago

1.0.0-alpha.503

5 months ago

1.0.0-alpha.461

8 months ago

1.0.0-alpha.465

7 months ago

1.0.0-alpha.464

7 months ago

1.0.0-alpha.463

8 months ago

1.0.0-alpha.462

8 months ago

1.0.0-alpha.469

7 months ago

1.0.0-alpha.468

7 months ago

1.0.0-alpha.467

7 months ago

1.0.0-alpha.466

7 months ago

1.0.0-alpha.472

7 months ago

1.0.0-alpha.471

7 months ago

1.0.0-alpha.470

7 months ago

1.0.0-alpha.476

7 months ago

1.0.0-alpha.475

7 months ago

1.0.0-alpha.474

7 months ago

1.0.0-alpha.473

7 months ago

1.0.0-alpha.479

7 months ago

1.0.0-alpha.478

7 months ago

1.0.0-alpha.477

7 months ago

1.0.0-alpha.449

8 months ago

1.0.0-alpha.448

8 months ago

1.0.0-alpha.443

8 months ago

1.0.0-alpha.442

8 months ago

1.0.0-alpha.441

8 months ago

1.0.0-alpha.440

8 months ago

1.0.0-alpha.447

8 months ago

1.0.0-alpha.446

8 months ago

1.0.0-alpha.445

8 months ago

1.0.0-alpha.444

8 months ago

1.0.0-alpha.459

8 months ago

1.0.0-alpha.450

8 months ago

1.0.0-alpha.454

8 months ago

1.0.0-alpha.453

8 months ago

1.0.0-alpha.452

8 months ago

1.0.0-alpha.451

8 months ago

1.0.0-alpha.458

8 months ago

1.0.0-alpha.457

8 months ago

1.0.0-alpha.456

8 months ago

1.0.0-alpha.455

8 months ago

1.0.0-alpha.483

7 months ago

1.0.0-alpha.482

7 months ago

1.0.0-alpha.481

7 months ago

1.0.0-alpha.480

7 months ago

1.0.0-alpha.487

7 months ago

1.0.0-alpha.486

7 months ago

1.0.0-alpha.485

7 months ago

1.0.0-alpha.484

7 months ago

1.0.0-alpha.489

7 months ago

1.0.0-alpha.488

7 months ago

1.0.0-alpha.490

7 months ago

1.0.0-alpha.494

6 months ago

1.0.0-alpha.493

6 months ago

1.0.0-alpha.492

7 months ago

1.0.0-alpha.491

7 months ago

1.0.0-alpha.498

6 months ago

1.0.0-alpha.497

6 months ago

1.0.0-alpha.496

6 months ago

1.0.0-alpha.495

6 months ago

1.0.0-alpha.499

6 months ago

1.0.0-alpha.502

6 months ago

1.0.0-alpha.501

6 months ago

1.0.0-alpha.500

6 months ago

1.0.0-alpha.429

9 months ago

1.0.0-alpha.428

9 months ago

1.0.0-alpha.427

9 months ago

1.0.0-alpha.426

9 months ago

1.0.0-alpha.421

10 months ago

1.0.0-alpha.420

10 months ago

1.0.0-alpha.425

9 months ago

1.0.0-alpha.424

10 months ago

1.0.0-alpha.423

10 months ago

1.0.0-alpha.422

10 months ago

1.0.0-alpha.439

8 months ago

1.0.0-alpha.438

8 months ago

1.0.0-alpha.437

8 months ago

1.0.0-alpha.432

9 months ago

1.0.0-alpha.431

9 months ago

1.0.0-alpha.430

9 months ago

1.0.0-alpha.436

8 months ago

1.0.0-alpha.435

9 months ago

1.0.0-alpha.434

9 months ago

1.0.0-alpha.433

9 months ago

1.0.0-alpha.391

12 months ago

1.0.0-alpha.390

12 months ago

1.0.0-alpha.395

12 months ago

1.0.0-alpha.394

12 months ago

1.0.0-alpha.393

12 months ago

1.0.0-alpha.392

12 months ago

1.0.0-alpha.399

12 months ago

1.0.0-alpha.398

12 months ago

1.0.0-alpha.397

12 months ago

1.0.0-alpha.396

12 months ago

1.0.0-alpha.407

12 months ago

1.0.0-alpha.406

12 months ago

1.0.0-alpha.405

12 months ago

1.0.0-alpha.404

12 months ago

1.0.0-alpha.409

11 months ago

1.0.0-alpha.408

12 months ago

1.0.0-alpha.403

12 months ago

1.0.0-alpha.402

12 months ago

1.0.0-alpha.401

12 months ago

1.0.0-alpha.400

12 months ago

1.0.0-alpha.418

11 months ago

1.0.0-alpha.417

11 months ago

1.0.0-alpha.416

11 months ago

1.0.0-alpha.415

11 months ago

1.0.0-alpha.419

11 months ago

1.0.0-alpha.410

11 months ago

1.0.0-alpha.414

11 months ago

1.0.0-alpha.413

11 months ago

1.0.0-alpha.412

11 months ago

1.0.0-alpha.411

11 months ago

1.0.0-alpha.349

1 year ago

1.0.0-alpha.340

1 year ago

1.0.0-alpha.344

1 year ago

1.0.0-alpha.343

1 year ago

1.0.0-alpha.342

1 year ago

1.0.0-alpha.341

1 year ago

1.0.0-alpha.348

1 year ago

1.0.0-alpha.347

1 year ago

1.0.0-alpha.346

1 year ago

1.0.0-alpha.345

1 year ago

1.0.0-alpha.351

1 year ago

1.0.0-alpha.350

1 year ago

1.0.0-alpha.355

1 year ago

1.0.0-alpha.354

1 year ago

1.0.0-alpha.353

1 year ago

1.0.0-alpha.352

1 year ago

1.0.0-alpha.359

1 year ago

1.0.0-alpha.358

1 year ago

1.0.0-alpha.357

1 year ago

1.0.0-alpha.356

1 year ago

1.0.0-alpha.339

1 year ago

1.0.0-alpha.336

1 year ago

1.0.0-alpha.335

1 year ago

1.0.0-alpha.380

1 year ago

1.0.0-alpha.384

1 year ago

1.0.0-alpha.383

1 year ago

1.0.0-alpha.382

1 year ago

1.0.0-alpha.381

1 year ago

1.0.0-alpha.388

1 year ago

1.0.0-alpha.387

1 year ago

1.0.0-alpha.386

1 year ago

1.0.0-alpha.385

1 year ago

1.0.0-alpha.389

12 months ago

1.0.0-alpha.362

1 year ago

1.0.0-alpha.361

1 year ago

1.0.0-alpha.360

1 year ago

1.0.0-alpha.366

1 year ago

1.0.0-alpha.365

1 year ago

1.0.0-alpha.364

1 year ago

1.0.0-alpha.363

1 year ago

1.0.0-alpha.369

1 year ago

1.0.0-alpha.368

1 year ago

1.0.0-alpha.367

1 year ago

1.0.0-alpha.373

1 year ago

1.0.0-alpha.372

1 year ago

1.0.0-alpha.371

1 year ago

1.0.0-alpha.370

1 year ago

1.0.0-alpha.377

1 year ago

1.0.0-alpha.376

1 year ago

1.0.0-alpha.375

1 year ago

1.0.0-alpha.374

1 year ago

1.0.0-alpha.379

1 year ago

1.0.0-alpha.378

1 year ago

1.0.0-alpha.329

1 year ago

1.0.0-alpha.328

1 year ago

1.0.0-alpha.327

1 year ago

1.0.0-alpha.322

1 year ago

1.0.0-alpha.321

1 year ago

1.0.0-alpha.320

1 year ago

1.0.0-alpha.326

1 year ago

1.0.0-alpha.325

1 year ago

1.0.0-alpha.324

1 year ago

1.0.0-alpha.323

1 year ago

1.0.0-alpha.333

1 year ago

1.0.0-alpha.332

1 year ago

1.0.0-alpha.331

1 year ago

1.0.0-alpha.330

1 year ago

1.0.0-alpha.334

1 year ago

1.0.0-alpha.319

1 year ago

1.0.0-alpha.318

1 year ago

1.0.0-alpha.317

1 year ago

1.0.0-alpha.316

1 year ago

1.0.0-alpha.315

1 year ago

1.0.0-alpha.314

1 year ago

1.0.0-alpha.263

1 year ago

1.0.0-alpha.262

1 year ago

1.0.0-alpha.261

2 years ago

1.0.0-alpha.260

2 years ago

1.0.0-alpha.267

1 year ago

1.0.0-alpha.266

1 year ago

1.0.0-alpha.265

1 year ago

1.0.0-alpha.264

1 year ago

1.0.0-alpha.269

1 year ago

1.0.0-alpha.268

1 year ago

1.0.0-alpha.270

1 year ago

1.0.0-alpha.274

1 year ago

1.0.0-alpha.273

1 year ago

1.0.0-alpha.272

1 year ago

1.0.0-alpha.271

1 year ago

1.0.0-alpha.278

1 year ago

1.0.0-alpha.277

1 year ago

1.0.0-alpha.276

1 year ago

1.0.0-alpha.275

1 year ago

1.0.0-alpha.279

1 year ago

1.0.0-alpha.245

2 years ago

1.0.0-alpha.244

2 years ago

1.0.0-alpha.243

2 years ago

1.0.0-alpha.242

2 years ago

1.0.0-alpha.249

2 years ago

1.0.0-alpha.248

2 years ago

1.0.0-alpha.247

2 years ago

1.0.0-alpha.246

2 years ago

1.0.0-alpha.252

2 years ago

1.0.0-alpha.251

2 years ago

1.0.0-alpha.250

2 years ago

1.0.0-alpha.256

2 years ago

1.0.0-alpha.255

2 years ago

1.0.0-alpha.254

2 years ago

1.0.0-alpha.253

2 years ago

1.0.0-alpha.259

2 years ago

1.0.0-alpha.258

2 years ago

1.0.0-alpha.257

2 years ago

1.0.0-alpha.281

1 year ago

1.0.0-alpha.280

1 year ago

1.0.0-alpha.285

1 year ago

1.0.0-alpha.284

1 year ago

1.0.0-alpha.283

1 year ago

1.0.0-alpha.282

1 year ago

1.0.0-alpha.289

1 year ago

1.0.0-alpha.288

1 year ago

1.0.0-alpha.287

1 year ago

1.0.0-alpha.286

1 year ago

1.0.0-alpha.292

1 year ago

1.0.0-alpha.291

1 year ago

1.0.0-alpha.290

1 year ago

1.0.0-alpha.296

1 year ago

1.0.0-alpha.295

1 year ago

1.0.0-alpha.294

1 year ago

1.0.0-alpha.293

1 year ago

1.0.0-alpha.299

1 year ago

1.0.0-alpha.298

1 year ago

1.0.0-alpha.297

1 year ago

1.0.0-alpha.308

1 year ago

1.0.0-alpha.307

1 year ago

1.0.0-alpha.306

1 year ago

1.0.0-alpha.305

1 year ago

1.0.0-alpha.309

1 year ago

1.0.0-alpha.300

1 year ago

1.0.0-alpha.304

1 year ago

1.0.0-alpha.303

1 year ago

1.0.0-alpha.302

1 year ago

1.0.0-alpha.301

1 year ago

1.0.0-alpha.311

1 year ago

1.0.0-alpha.310

1 year ago

1.0.0-alpha.313

1 year ago

1.0.0-alpha.312

1 year ago

1.0.0-alpha.241

2 years ago

1.0.0-alpha.229

2 years ago

1.0.0-alpha.228

2 years ago

1.0.0-alpha.223

2 years ago

1.0.0-alpha.222

2 years ago

1.0.0-alpha.221

2 years ago

1.0.0-alpha.220

2 years ago

1.0.0-alpha.227

2 years ago

1.0.0-alpha.226

2 years ago

1.0.0-alpha.225

2 years ago

1.0.0-alpha.224

2 years ago

1.0.0-alpha.239

2 years ago

1.0.0-alpha.230

2 years ago

1.0.0-alpha.234

2 years ago

1.0.0-alpha.233

2 years ago

1.0.0-alpha.232

2 years ago

1.0.0-alpha.231

2 years ago

1.0.0-alpha.238

2 years ago

1.0.0-alpha.237

2 years ago

1.0.0-alpha.236

2 years ago

1.0.0-alpha.235

2 years ago

1.0.0-alpha.209

2 years ago

1.0.0-alpha.208

2 years ago

1.0.0-alpha.207

2 years ago

1.0.0-alpha.206

2 years ago

1.0.0-alpha.201

2 years ago

1.0.0-alpha.200

2 years ago

1.0.0-alpha.205

2 years ago

1.0.0-alpha.204

2 years ago

1.0.0-alpha.203

2 years ago

1.0.0-alpha.202

2 years ago

1.0.0-alpha.219

2 years ago

1.0.0-alpha.218

2 years ago

1.0.0-alpha.217

2 years ago

1.0.0-alpha.212

2 years ago

1.0.0-alpha.211

2 years ago

1.0.0-alpha.210

2 years ago

1.0.0-alpha.216

2 years ago

1.0.0-alpha.215

2 years ago

1.0.0-alpha.214

2 years ago

1.0.0-alpha.213

2 years ago

1.0.0-alpha.146

2 years ago

1.0.0-alpha.149

2 years ago

1.0.0-alpha.148

2 years ago

1.0.0-alpha.147

2 years ago

1.0.0-alpha.153

2 years ago

1.0.0-alpha.152

2 years ago

1.0.0-alpha.151

2 years ago

1.0.0-alpha.150

2 years ago

1.0.0-alpha.157

2 years ago

1.0.0-alpha.156

2 years ago

1.0.0-alpha.155

2 years ago

1.0.0-alpha.154

2 years ago

1.0.0-alpha.159

2 years ago

1.0.0-alpha.158

2 years ago

1.0.0-alpha.240

2 years ago

1.0.0-alpha.182

2 years ago

1.0.0-alpha.181

2 years ago

1.0.0-alpha.180

2 years ago

1.0.0-alpha.186

2 years ago

1.0.0-alpha.185

2 years ago

1.0.0-alpha.184

2 years ago

1.0.0-alpha.183

2 years ago

1.0.0-alpha.189

2 years ago

1.0.0-alpha.188

2 years ago

1.0.0-alpha.187

2 years ago

1.0.0-alpha.193

2 years ago

1.0.0-alpha.192

2 years ago

1.0.0-alpha.191

2 years ago

1.0.0-alpha.190

2 years ago

1.0.0-alpha.197

2 years ago

1.0.0-alpha.196

2 years ago

1.0.0-alpha.195

2 years ago

1.0.0-alpha.194

2 years ago

1.0.0-alpha.199

2 years ago

1.0.0-alpha.198

2 years ago

1.0.0-alpha.160

2 years ago

1.0.0-alpha.164

2 years ago

1.0.0-alpha.163

2 years ago

1.0.0-alpha.162

2 years ago

1.0.0-alpha.161

2 years ago

1.0.0-alpha.168

2 years ago

1.0.0-alpha.167

2 years ago

1.0.0-alpha.166

2 years ago

1.0.0-alpha.165

2 years ago

1.0.0-alpha.169

2 years ago

1.0.0-alpha.171

2 years ago

1.0.0-alpha.170

2 years ago

1.0.0-alpha.175

2 years ago

1.0.0-alpha.174

2 years ago

1.0.0-alpha.173

2 years ago

1.0.0-alpha.172

2 years ago

1.0.0-alpha.179

2 years ago

1.0.0-alpha.178

2 years ago

1.0.0-alpha.177

2 years ago

1.0.0-alpha.176

2 years ago

1.0.0-alpha.142

2 years ago

1.0.0-alpha.141

2 years ago

1.0.0-alpha.140

2 years ago

1.0.0-alpha.145

2 years ago

1.0.0-alpha.144

2 years ago

1.0.0-alpha.143

2 years ago

1.0.0-alpha.129

2 years ago

1.0.0-alpha.124

2 years ago

1.0.0-alpha.128

2 years ago

1.0.0-alpha.127

2 years ago

1.0.0-alpha.126

2 years ago

1.0.0-alpha.125

2 years ago

1.0.0-alpha.131

2 years ago

1.0.0-alpha.130

2 years ago

1.0.0-alpha.135

2 years ago

1.0.0-alpha.134

2 years ago

1.0.0-alpha.133

2 years ago

1.0.0-alpha.132

2 years ago

1.0.0-alpha.139

2 years ago

1.0.0-alpha.138

2 years ago

1.0.0-alpha.137

2 years ago

1.0.0-alpha.136

2 years ago

1.0.0-alpha.119

2 years ago

1.0.0-alpha.118

2 years ago

1.0.0-alpha.113

2 years ago

1.0.0-alpha.112

2 years ago

1.0.0-alpha.117

2 years ago

1.0.0-alpha.116

2 years ago

1.0.0-alpha.115

2 years ago

1.0.0-alpha.114

2 years ago

1.0.0-alpha.120

2 years ago

1.0.0-alpha.123

2 years ago

1.0.0-alpha.122

2 years ago

1.0.0-alpha.121

2 years ago

1.0.0-alpha.109

2 years ago

1.0.0-alpha.108

2 years ago

1.0.0-alpha.107

2 years ago

1.0.0-alpha.102

2 years ago

1.0.0-alpha.101

2 years ago

1.0.0-alpha.100

2 years ago

1.0.0-alpha.106

2 years ago

1.0.0-alpha.105

2 years ago

1.0.0-alpha.104

2 years ago

1.0.0-alpha.103

2 years ago

1.0.0-alpha.111

2 years ago

1.0.0-alpha.110

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago