diff --git a/.changelog/10914.txt b/.changelog/10914.txt new file mode 100644 index 0000000000..67aadc4f3c --- /dev/null +++ b/.changelog/10914.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: hide create button for policies/roles/namespace if users token has no write permissions to those areas +``` diff --git a/.changelog/11129.txt b/.changelog/11129.txt new file mode 100644 index 0000000000..9d1d65a8bb --- /dev/null +++ b/.changelog/11129.txt @@ -0,0 +1,4 @@ +```release-note:improvement +ui: Add initial support for partitions to intentions +``` + diff --git a/.changelog/11130.txt b/.changelog/11130.txt new file mode 100644 index 0000000000..4a872c7fc0 --- /dev/null +++ b/.changelog/11130.txt @@ -0,0 +1,4 @@ +```release-note:improvement +ui: Removed informational panel from the namespace selector menu when editing +namespaces +``` diff --git a/.changelog/11149.txt b/.changelog/11149.txt new file mode 100644 index 0000000000..b028e0ac74 --- /dev/null +++ b/.changelog/11149.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: Don't show a CRD warning for read-only intentions +``` diff --git a/CHANGELOG.md b/CHANGELOG.md index 837fd85acd..60011bf4c5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -47,6 +47,34 @@ manage licenses on older servers [[GH-10952](https://github.com/hashicorp/consul * use the MaxQueryTime instead of RPCHoldTimeout for blocking RPC queries [[GH-8978](https://github.com/hashicorp/consul/pull/8978)]. [[GH-10299](https://github.com/hashicorp/consul/issues/10299)] +## 1.10.3 (September 27, 2021) + +FEATURES: + +* sso/oidc: **(Enterprise only)** Add support for providing acr_values in OIDC auth flow [[GH-11026](https://github.com/hashicorp/consul/issues/11026)] + +IMPROVEMENTS: + +* audit-logging: **(Enterprise Only)** Audit logs will now include select HTTP headers in each logs payload. Those headers are: `Forwarded`, `Via`, `X-Forwarded-For`, `X-Forwarded-Host` and `X-Forwarded-Proto`. [[GH-11107](https://github.com/hashicorp/consul/issues/11107)] +* connect: update supported envoy versions to 1.18.4, 1.17.4, 1.16.5 [[GH-10961](https://github.com/hashicorp/consul/issues/10961)] +* telemetry: Add new metrics for the count of KV entries in the Consul store. [[GH-11090](https://github.com/hashicorp/consul/issues/11090)] + +BUG FIXES: + +* api: Revert early out errors from license APIs to allow v1.10+ clients to +manage licenses on older servers [[GH-10952](https://github.com/hashicorp/consul/issues/10952)] +* connect: Fix upstream listener escape hatch for prepared queries [[GH-11109](https://github.com/hashicorp/consul/issues/11109)] +* grpc: strip local ACL tokens from RPCs during forwarding if crossing datacenters [[GH-11099](https://github.com/hashicorp/consul/issues/11099)] +* tls: consider presented intermediates during server connection tls handshake. [[GH-10964](https://github.com/hashicorp/consul/issues/10964)] +* ui: **(Enterprise Only)** Fix saving intentions with namespaced source/destination [[GH-11095](https://github.com/hashicorp/consul/issues/11095)] +* ui: Don't show a CRD warning for read-only intentions [[GH-11149](https://github.com/hashicorp/consul/issues/11149)] +* ui: Ensure routing-config page blocking queries are cleaned up correctly [[GH-10915](https://github.com/hashicorp/consul/issues/10915)] +* ui: Ignore reported permissions for KV area meaning the KV is always enabled +for both read/write access if the HTTP API allows. [[GH-10916](https://github.com/hashicorp/consul/issues/10916)] +* ui: hide create button for policies/roles/namespace if users token has no write permissions to those areas [[GH-10914](https://github.com/hashicorp/consul/issues/10914)] +* xds: ensure the active streams counters are 64 bit aligned on 32 bit systems [[GH-11085](https://github.com/hashicorp/consul/issues/11085)] +* xds: fixed a bug where Envoy sidecars could enter a state where they failed to receive xds updates from Consul [[GH-10987](https://github.com/hashicorp/consul/issues/10987)] + ## 1.10.2 (August 27, 2021) KNOWN ISSUES: @@ -249,6 +277,23 @@ NOTES: * legal: **(Enterprise only)** Enterprise binary downloads will now include a copy of the EULA and Terms of Evaluation in the zip archive +## 1.9.10 (September 27, 2021) + +FEATURES: + +* sso/oidc: **(Enterprise only)** Add support for providing acr_values in OIDC auth flow [[GH-11026](https://github.com/hashicorp/consul/issues/11026)] + +IMPROVEMENTS: + +* audit-logging: **(Enterprise Only)** Audit logs will now include select HTTP headers in each logs payload. Those headers are: `Forwarded`, `Via`, `X-Forwarded-For`, `X-Forwarded-Host` and `X-Forwarded-Proto`. [[GH-11107](https://github.com/hashicorp/consul/issues/11107)] +* connect: update supported envoy versions to 1.16.5 [[GH-10961](https://github.com/hashicorp/consul/issues/10961)] +* telemetry: Add new metrics for the count of KV entries in the Consul store. [[GH-11090](https://github.com/hashicorp/consul/issues/11090)] + +BUG FIXES: + +* tls: consider presented intermediates during server connection tls handshake. [[GH-10964](https://github.com/hashicorp/consul/issues/10964)] +* ui: **(Enterprise Only)** Fix saving intentions with namespaced source/destination [[GH-11095](https://github.com/hashicorp/consul/issues/11095)] + ## 1.9.9 (August 27, 2021) KNOWN ISSUES: @@ -590,6 +635,21 @@ BUG FIXES: * telemetry: fixed a bug that caused logs to be flooded with `[WARN] agent.router: Non-server in server-only area` [[GH-8685](https://github.com/hashicorp/consul/issues/8685)] * ui: show correct datacenter for gateways [[GH-8704](https://github.com/hashicorp/consul/issues/8704)] +## 1.8.16 (September 27, 2021) + +FEATURES: + +* sso/oidc: **(Enterprise only)** Add support for providing acr_values in OIDC auth flow [[GH-11026](https://github.com/hashicorp/consul/issues/11026)] + +IMPROVEMENTS: + +* audit-logging: **(Enterprise Only)** Audit logs will now include select HTTP headers in each logs payload. Those headers are: `Forwarded`, `Via`, `X-Forwarded-For`, `X-Forwarded-Host` and `X-Forwarded-Proto`. [[GH-11107](https://github.com/hashicorp/consul/issues/11107)] + +BUG FIXES: + +* tls: consider presented intermediates during server connection tls handshake. [[GH-10964](https://github.com/hashicorp/consul/issues/10964)] +* ui: **(Enterprise Only)** Fixes a visual issue where namespaces would "double up" in the Source/Destination select menu when creating/editing intentions [[GH-11102](https://github.com/hashicorp/consul/issues/11102)] + ## 1.8.15 (August 27, 2021) KNOWN ISSUES: diff --git a/agent/agent.go b/agent/agent.go index 1fdea4bc6e..a143ff94de 100644 --- a/agent/agent.go +++ b/agent/agent.go @@ -2864,44 +2864,6 @@ func (a *Agent) AdvertiseAddrLAN() string { return a.config.AdvertiseAddrLAN.String() } -// resolveProxyCheckAddress returns the best address to use for a TCP check of -// the proxy's public listener. It expects the input to already have default -// values populated by applyProxyConfigDefaults. It may return an empty string -// indicating that the TCP check should not be created at all. -// -// By default this uses the proxy's bind address which in turn defaults to the -// agent's bind address. If the proxy bind address ends up being 0.0.0.0 we have -// to assume the agent can dial it over loopback which is usually true. -// -// In some topologies such as proxy being in a different container, the IP the -// agent used to dial proxy over a local bridge might not be the same as the -// container's public routable IP address so we allow a manual override of the -// check address in config "tcp_check_address" too. -// -// Finally the TCP check can be disabled by another manual override -// "disable_tcp_check" in cases where the agent will never be able to dial the -// proxy directly for some reason. -func (a *Agent) resolveProxyCheckAddress(proxyCfg map[string]interface{}) string { - // If user disabled the check return empty string - if disable, ok := proxyCfg["disable_tcp_check"].(bool); ok && disable { - return "" - } - - // If user specified a custom one, use that - if chkAddr, ok := proxyCfg["tcp_check_address"].(string); ok && chkAddr != "" { - return chkAddr - } - - // If we have a bind address and its diallable, use that - if bindAddr, ok := proxyCfg["bind_address"].(string); ok && - bindAddr != "" && bindAddr != "0.0.0.0" && bindAddr != "[::]" { - return bindAddr - } - - // Default to localhost - return "127.0.0.1" -} - func (a *Agent) cancelCheckMonitors(checkID structs.CheckID) { // Stop any monitors delete(a.checkReapAfter, checkID) diff --git a/agent/consul/autopilot.go b/agent/consul/autopilot.go index d926e4a991..5033032c84 100644 --- a/agent/consul/autopilot.go +++ b/agent/consul/autopilot.go @@ -58,7 +58,7 @@ func (d *AutopilotDelegate) NotifyState(state *autopilot.State) { func (d *AutopilotDelegate) RemoveFailedServer(srv *autopilot.Server) { go func() { if err := d.server.RemoveFailedNode(srv.Name, false); err != nil { - d.server.logger.Error("failedto remove server", "name", srv.Name, "id", srv.ID, "error", err) + d.server.logger.Error("failed to remove server", "name", srv.Name, "id", srv.ID, "error", err) } }() } diff --git a/agent/consul/intention_endpoint_test.go b/agent/consul/intention_endpoint_test.go index 7ddf7d9d6c..64bb466f97 100644 --- a/agent/consul/intention_endpoint_test.go +++ b/agent/consul/intention_endpoint_test.go @@ -75,7 +75,7 @@ func TestIntentionApply_new(t *testing.T) { //nolint:staticcheck ixn.Intention.UpdatePrecedence() // Partition fields will be normalized on Intention.Get - ixn.Intention.NormalizePartitionFields() + ixn.Intention.FillPartitionAndNamespace(nil, true) require.Equal(t, ixn.Intention, actual) } @@ -269,7 +269,7 @@ func TestIntentionApply_updateGood(t *testing.T) { //nolint:staticcheck ixn.Intention.UpdatePrecedence() // Partition fields will be normalized on Intention.Get - ixn.Intention.NormalizePartitionFields() + ixn.Intention.FillPartitionAndNamespace(nil, true) require.Equal(t, ixn.Intention, actual) } } diff --git a/agent/consul/state/acl.go b/agent/consul/state/acl.go index 8023b95faf..548bb7c957 100644 --- a/agent/consul/state/acl.go +++ b/agent/consul/state/acl.go @@ -1741,3 +1741,51 @@ func intFromBool(cond bool) byte { } return 0 } + +func aclPolicyInsert(tx WriteTxn, policy *structs.ACLPolicy) error { + if err := tx.Insert(tableACLPolicies, policy); err != nil { + return fmt.Errorf("failed inserting acl policy: %v", err) + } + return updateTableIndexEntries(tx, tableACLPolicies, policy.ModifyIndex, &policy.EnterpriseMeta) +} + +func aclRoleInsert(tx WriteTxn, role *structs.ACLRole) error { + // insert the role into memdb + if err := tx.Insert(tableACLRoles, role); err != nil { + return fmt.Errorf("failed inserting acl role: %v", err) + } + + // update acl-roles index + return updateTableIndexEntries(tx, tableACLRoles, role.ModifyIndex, &role.EnterpriseMeta) +} + +func aclTokenInsert(tx WriteTxn, token *structs.ACLToken) error { + // insert the token into memdb + if err := tx.Insert(tableACLTokens, token); err != nil { + return fmt.Errorf("failed inserting acl token: %v", err) + } + // update the overall acl-tokens index + return updateTableIndexEntries(tx, tableACLTokens, token.ModifyIndex, token.EnterpriseMetadata()) +} + +func aclAuthMethodInsert(tx WriteTxn, method *structs.ACLAuthMethod) error { + // insert the auth method into memdb + if err := tx.Insert(tableACLAuthMethods, method); err != nil { + return fmt.Errorf("failed inserting acl role: %v", err) + } + + // update acl-auth-methods index + return updateTableIndexEntries(tx, tableACLAuthMethods, method.ModifyIndex, &method.EnterpriseMeta) +} + +func aclBindingRuleInsert(tx WriteTxn, rule *structs.ACLBindingRule) error { + rule.EnterpriseMeta.Normalize() + + // insert the role into memdb + if err := tx.Insert(tableACLBindingRules, rule); err != nil { + return fmt.Errorf("failed inserting acl role: %v", err) + } + + // update acl-binding-rules index + return updateTableIndexEntries(tx, tableACLBindingRules, rule.ModifyIndex, &rule.EnterpriseMeta) +} diff --git a/agent/consul/state/acl_oss.go b/agent/consul/state/acl_oss.go index fced3749d4..25483fa3e1 100644 --- a/agent/consul/state/acl_oss.go +++ b/agent/consul/state/acl_oss.go @@ -11,15 +11,10 @@ import ( "github.com/hashicorp/consul/agent/structs" ) -func aclPolicyInsert(tx WriteTxn, policy *structs.ACLPolicy) error { - if err := tx.Insert(tableACLPolicies, policy); err != nil { - return fmt.Errorf("failed inserting acl policy: %v", err) +func updateTableIndexEntries(tx WriteTxn, tableName string, modifyIndex uint64, _ *structs.EnterpriseMeta) error { + if err := indexUpdateMaxTxn(tx, modifyIndex, tableName); err != nil { + return fmt.Errorf("failed updating %s index: %v", tableName, err) } - - if err := indexUpdateMaxTxn(tx, policy.ModifyIndex, tableACLPolicies); err != nil { - return fmt.Errorf("failed updating acl policies index: %v", err) - } - return nil } @@ -56,20 +51,6 @@ func (s *Store) ACLPolicyUpsertValidateEnterprise(*structs.ACLPolicy, *structs.A ///// ACL Token Functions ///// /////////////////////////////////////////////////////////////////////////////// -func aclTokenInsert(tx WriteTxn, token *structs.ACLToken) error { - // insert the token into memdb - if err := tx.Insert(tableACLTokens, token); err != nil { - return fmt.Errorf("failed inserting acl token: %v", err) - } - - // update the overall acl-tokens index - if err := indexUpdateMaxTxn(tx, token.ModifyIndex, tableACLTokens); err != nil { - return fmt.Errorf("failed updating acl tokens index: %v", err) - } - - return nil -} - func aclTokenGetFromIndex(tx ReadTxn, id string, index string, entMeta *structs.EnterpriseMeta) (<-chan struct{}, interface{}, error) { return tx.FirstWatch(tableACLTokens, index, id) } @@ -119,19 +100,6 @@ func (s *Store) ACLTokenUpsertValidateEnterprise(token *structs.ACLToken, existi ///// ACL Role Functions ///// /////////////////////////////////////////////////////////////////////////////// -func aclRoleInsert(tx WriteTxn, role *structs.ACLRole) error { - // insert the role into memdb - if err := tx.Insert(tableACLRoles, role); err != nil { - return fmt.Errorf("failed inserting acl role: %v", err) - } - - // update the overall acl-roles index - if err := indexUpdateMaxTxn(tx, role.ModifyIndex, tableACLRoles); err != nil { - return fmt.Errorf("failed updating acl roles index: %v", err) - } - return nil -} - func aclRoleGetByID(tx ReadTxn, id string, _ *structs.EnterpriseMeta) (<-chan struct{}, interface{}, error) { return tx.FirstWatch(tableACLRoles, indexID, id) } @@ -165,20 +133,6 @@ func (s *Store) ACLRoleUpsertValidateEnterprise(role *structs.ACLRole, existing ///// ACL Binding Rule Functions ///// /////////////////////////////////////////////////////////////////////////////// -func aclBindingRuleInsert(tx WriteTxn, rule *structs.ACLBindingRule) error { - // insert the role into memdb - if err := tx.Insert(tableACLBindingRules, rule); err != nil { - return fmt.Errorf("failed inserting acl role: %v", err) - } - - // update the overall acl-binding-rules index - if err := indexUpdateMaxTxn(tx, rule.ModifyIndex, tableACLBindingRules); err != nil { - return fmt.Errorf("failed updating acl binding-rules index: %v", err) - } - - return nil -} - func aclBindingRuleGetByID(tx ReadTxn, id string, _ *structs.EnterpriseMeta) (<-chan struct{}, interface{}, error) { return tx.FirstWatch(tableACLBindingRules, indexID, id) } @@ -220,20 +174,6 @@ func (s *Store) ACLBindingRuleUpsertValidateEnterprise(rule *structs.ACLBindingR ///// ACL Auth Method Functions ///// /////////////////////////////////////////////////////////////////////////////// -func aclAuthMethodInsert(tx WriteTxn, method *structs.ACLAuthMethod) error { - // insert the role into memdb - if err := tx.Insert(tableACLAuthMethods, method); err != nil { - return fmt.Errorf("failed inserting acl role: %v", err) - } - - // update the overall acl-auth-methods index - if err := indexUpdateMaxTxn(tx, method.ModifyIndex, tableACLAuthMethods); err != nil { - return fmt.Errorf("failed updating acl auth methods index: %v", err) - } - - return nil -} - func aclAuthMethodGetByName(tx ReadTxn, method string, _ *structs.EnterpriseMeta) (<-chan struct{}, interface{}, error) { return tx.FirstWatch(tableACLAuthMethods, indexID, Query{Value: method}) } diff --git a/agent/consul/state/intention_test.go b/agent/consul/state/intention_test.go index 7ddd4c5a9a..f2a5f87867 100644 --- a/agent/consul/state/intention_test.go +++ b/agent/consul/state/intention_test.go @@ -156,7 +156,7 @@ func TestStore_IntentionSetGet_basic(t *testing.T) { //nolint:staticcheck expected.SetHash() - expected.NormalizePartitionFields() + expected.FillPartitionAndNamespace(nil, true) } require.True(t, watchFired(ws), "watch fired") @@ -1098,7 +1098,7 @@ func TestStore_IntentionsList(t *testing.T) { UpdatedAt: testTimeA, } if !legacy { - ret.NormalizePartitionFields() + ret.FillPartitionAndNamespace(nil, true) } return ret } diff --git a/agent/structs/intention_oss.go b/agent/structs/intention_oss.go index 274f799d65..0c445b0a89 100644 --- a/agent/structs/intention_oss.go +++ b/agent/structs/intention_oss.go @@ -74,8 +74,3 @@ func (ixn *Intention) FillPartitionAndNamespace(entMeta *EnterpriseMeta, fillDef ixn.SourcePartition = "" ixn.DestinationPartition = "" } - -func (ixn *Intention) NormalizePartitionFields() { - ixn.SourcePartition = "" - ixn.DestinationPartition = "" -} diff --git a/agent/structs/testing_intention.go b/agent/structs/testing_intention.go index 3497ba2fcd..c8a42d7916 100644 --- a/agent/structs/testing_intention.go +++ b/agent/structs/testing_intention.go @@ -15,6 +15,6 @@ func TestIntention(t testing.T) *Intention { SourceType: IntentionSourceConsul, Meta: map[string]string{}, } - ixn.NormalizePartitionFields() + ixn.FillPartitionAndNamespace(nil, true) return ixn } diff --git a/command/acl/acl_helpers.go b/command/acl/acl_helpers.go index 296a6b9f90..add5c930c5 100644 --- a/command/acl/acl_helpers.go +++ b/command/acl/acl_helpers.go @@ -71,23 +71,26 @@ func GetPolicyIDFromPartial(client *api.Client, partialID string) (string, error return policyID, nil } -func GetPolicyIDByName(client *api.Client, name string) (string, error) { +func GetPolicyByName(client *api.Client, name string) (*api.ACLPolicy, error) { if name == "" { - return "", fmt.Errorf("No name specified") + return nil, fmt.Errorf("No name specified") } - policies, _, err := client.ACL().PolicyList(nil) + policy, _, err := client.ACL().PolicyReadByName(name, nil) + if err != nil { + return nil, fmt.Errorf("Failed to find policy with name %s: %w", name, err) + } + + return policy, nil +} + +func GetPolicyIDByName(client *api.Client, name string) (string, error) { + policy, err := GetPolicyByName(client, name) if err != nil { return "", err } - for _, policy := range policies { - if policy.Name == name { - return policy.ID, nil - } - } - - return "", fmt.Errorf("No such policy with name %s", name) + return policy.ID, nil } func GetRulesFromLegacyToken(client *api.Client, tokenID string, isSecret bool) (string, error) { diff --git a/command/acl/policy/read/policy_read.go b/command/acl/policy/read/policy_read.go index 3d043815f6..c5be7f63b4 100644 --- a/command/acl/policy/read/policy_read.go +++ b/command/acl/policy/read/policy_read.go @@ -5,6 +5,7 @@ import ( "fmt" "strings" + "github.com/hashicorp/consul/api" "github.com/hashicorp/consul/command/acl" "github.com/hashicorp/consul/command/acl/policy" "github.com/hashicorp/consul/command/flags" @@ -67,19 +68,26 @@ func (c *cmd) Run(args []string) int { } var policyID string + var pol *api.ACLPolicy if c.policyID != "" { policyID, err = acl.GetPolicyIDFromPartial(client, c.policyID) + if err != nil { + c.UI.Error(fmt.Sprintf("Error determining policy ID: %v", err)) + return 1 + } + pol, _, err = client.ACL().PolicyRead(policyID, nil) } else { - policyID, err = acl.GetPolicyIDByName(client, c.policyName) - } - if err != nil { - c.UI.Error(fmt.Sprintf("Error determining policy ID: %v", err)) - return 1 + pol, err = acl.GetPolicyByName(client, c.policyName) } - p, _, err := client.ACL().PolicyRead(policyID, nil) if err != nil { - c.UI.Error(fmt.Sprintf("Error reading policy %q: %v", policyID, err)) + var errArg string + if c.policyID != "" { + errArg = fmt.Sprintf("id:%s", policyID) + } else { + errArg = fmt.Sprintf("name:%s", c.policyName) + } + c.UI.Error(fmt.Sprintf("Error reading policy %q: %v", errArg, err)) return 1 } @@ -88,7 +96,7 @@ func (c *cmd) Run(args []string) int { c.UI.Error(err.Error()) return 1 } - out, err := formatter.FormatPolicy(p) + out, err := formatter.FormatPolicy(pol) if err != nil { c.UI.Error(err.Error()) return 1 diff --git a/command/acl/policy/read/policy_read_test.go b/command/acl/policy/read/policy_read_test.go index 377a75ab23..b365287194 100644 --- a/command/acl/policy/read/policy_read_test.go +++ b/command/acl/policy/read/policy_read_test.go @@ -53,6 +53,7 @@ func TestPolicyReadCommand(t *testing.T) { ) assert.NoError(err) + // Test querying by id field args := []string{ "-http-addr=" + a.HTTPAddr(), "-token=root", @@ -66,6 +67,22 @@ func TestPolicyReadCommand(t *testing.T) { output := ui.OutputWriter.String() assert.Contains(output, fmt.Sprintf("test-policy")) assert.Contains(output, policy.ID) + + // Test querying by name field + argsName := []string{ + "-http-addr=" + a.HTTPAddr(), + "-token=root", + "-name=test-policy", + } + + cmd = New(ui) + code = cmd.Run(argsName) + assert.Equal(code, 0) + assert.Empty(ui.ErrorWriter.String()) + + output = ui.OutputWriter.String() + assert.Contains(output, fmt.Sprintf("test-policy")) + assert.Contains(output, policy.ID) } func TestPolicyReadCommand_JSON(t *testing.T) { diff --git a/ui/packages/consul-ui/app/abilities/intention.js b/ui/packages/consul-ui/app/abilities/intention.js index 35551e670a..91f3a013b4 100644 --- a/ui/packages/consul-ui/app/abilities/intention.js +++ b/ui/packages/consul-ui/app/abilities/intention.js @@ -4,6 +4,9 @@ export default class IntentionAbility extends BaseAbility { resource = 'intention'; get canWrite() { - return super.canWrite && (typeof this.item === 'undefined' || this.item.IsEditable); + return super.canWrite && (typeof this.item === 'undefined' || !this.canViewCRD); + } + get canViewCRD() { + return (typeof this.item !== 'undefined' && this.item.IsManagedByCRD); } } diff --git a/ui/packages/consul-ui/app/adapters/intention.js b/ui/packages/consul-ui/app/adapters/intention.js index 6bd10fbaa7..13108e860c 100644 --- a/ui/packages/consul-ui/app/adapters/intention.js +++ b/ui/packages/consul-ui/app/adapters/intention.js @@ -7,10 +7,11 @@ import { get } from '@ember/object'; // will give us all the intentions that have the `ns` as either the SourceNS or // the DestinationNS. // We currently list intentions by the * wildcard namespace for back compat reasons +// FIXME: Is now a good time to change this behaviour ^ ? // TODO: Update to use this.formatDatacenter() export default class IntentionAdapter extends Adapter { - requestForQuery(request, { dc, ns, filter, index, uri }) { + requestForQuery(request, { dc, ns, partition, filter, index, uri }) { return request` GET /v1/connect/intentions?${{ dc }} X-Request-ID: ${uri}${ @@ -21,7 +22,7 @@ export default class IntentionAdapter extends Adapter { } ${{ - partition: '', + partition: '*', ns: '*', index, filter, @@ -36,14 +37,21 @@ export default class IntentionAdapter extends Adapter { // get the information we need from the id, which has been previously // encoded - const [SourceNS, SourceName, DestinationNS, DestinationName] = id - .split(':') - .map(decodeURIComponent); + const [ + SourcePartition, + SourceNS, + SourceName, + DestinationPartition, + DestinationNS, + DestinationName, + ] = id.split(':').map(decodeURIComponent); + // FIXME: Service and Namespace are encoded into the URL here + // guessing we need to do the same thing for Partitions return request` GET /v1/connect/intentions/exact?${{ - source: `${SourceNS}/${SourceName}`, - destination: `${DestinationNS}/${DestinationName}`, + source: `${SourcePartition}/${SourceNS}/${SourceName}`, + destination: `${DestinationPartition}/${DestinationNS}/${DestinationName}`, dc: dc, }} Cache-Control: no-store @@ -54,10 +62,12 @@ export default class IntentionAdapter extends Adapter { requestForCreateRecord(request, serialized, data) { const body = { - SourceNS: serialized.SourceNS, - DestinationNS: serialized.DestinationNS, SourceName: serialized.SourceName, DestinationName: serialized.DestinationName, + SourceNS: serialized.SourceNS, + DestinationNS: serialized.DestinationNS, + SourcePartition: serialized.SourcePartition, + DestinationPartition: serialized.DestinationPartition, SourceType: serialized.SourceType, Meta: serialized.Meta, Description: serialized.Description, @@ -72,10 +82,12 @@ export default class IntentionAdapter extends Adapter { body.Permissions = serialized.Permissions; } } + // FIXME: Service and Namespace are encoded into the URL here + // guessing we need to do the same thing for Partitions return request` PUT /v1/connect/intentions/exact?${{ - source: `${data.SourceNS}/${data.SourceName}`, - destination: `${data.DestinationNS}/${data.DestinationName}`, + source: `${data.SourcePartition}/${data.SourceNS}/${data.SourceName}`, + destination: `${data.DestinationPartition}/${data.DestinationNS}/${data.DestinationName}`, dc: data.Datacenter, }} @@ -85,16 +97,20 @@ export default class IntentionAdapter extends Adapter { requestForUpdateRecord(request, serialized, data) { // you can no longer save Destinations - delete serialized.DestinationNS; delete serialized.DestinationName; + delete serialized.DestinationNS; + // FIXME: Does the above comment stand for partitions also? + delete serialized.DestinationPartition; return this.requestForCreateRecord(...arguments); } requestForDeleteRecord(request, serialized, data) { + // FIXME: Service and Namespace are encoded into the URL here + // guessing we need to do the same thing for Partitions return request` DELETE /v1/connect/intentions/exact?${{ - source: `${data.SourceNS}/${data.SourceName}`, - destination: `${data.DestinationNS}/${data.DestinationName}`, + source: `${data.SourcePartition}/${data.SourceNS}/${data.SourceName}`, + destination: `${data.DestinationPartition}/${data.DestinationNS}/${data.DestinationName}`, dc: data.Datacenter, }} `; diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs index e19be3d500..4d9dd03065 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs @@ -28,7 +28,7 @@ Search for an existing service, or enter any Service name. {{/if}} - {{#if (env 'CONSUL_NSPACES_ENABLED')}} + {{#if (can 'choose nspaces')}} -{{/if}} + {{/if}} + {{#if (can 'choose partitions')}} + + {{/if}}

Destination

@@ -76,7 +99,7 @@ Search for an existing service, or enter any Service name. {{/if}} - {{#if (env 'CONSUL_NSPACES_ENABLED')}} + {{#if (can 'choose nspaces')}} -{{/if}} + {{/if}} + {{#if (can 'choose partitions')}} + + {{/if}}
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs index 254e1d50f5..f6338535c3 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs @@ -95,6 +95,17 @@ as |api|> /> {{/if}} + {{#if (can 'use partitions')}} + + {{/if}} + {{#if (and api.isCreate this.isManagedByCRDs)}} {{/if}} @@ -103,11 +114,14 @@ as |api|> > a.Name.localeCompare(b.Name)); + items = [{ Name: '*' }].concat(items); + let source = items.findBy('Name', item.SourcePartition); + if (!source) { + source = { Name: item.SourcePartition }; + items = [source].concat(items); + } + let destination = items.findBy('Name', item.DestinationPartition); + if (!destination) { + destination = { Name: item.DestinationPartition }; + items = [destination].concat(items); + } + this.partitions = items; + this.SourcePartition = source; + this.DestinationPartition = destination; + } + @action change(e, form, item) { const target = e.target; @@ -125,6 +151,8 @@ export default class ConsulIntentionForm extends Component { case 'DestinationName': case 'SourceNS': case 'DestinationNS': + case 'SourcePartition': + case 'DestinationPartition': name = selected = target.value; // Names can be selected Service EmberObjects or typed in strings // if its not a string, use the `Name` from the Service EmberObject @@ -158,6 +186,13 @@ export default class ConsulIntentionForm extends Component { this.nspaces = [selected].concat(this.nspaces.toArray()); } break; + case 'SourcePartition': + case 'DestinationPartition': + if (this.partitions.filterBy('Name', name).length === 0) { + selected = { Name: name }; + this.partitions = [selected].concat(this.partitions.toArray()); + } + break; } this[target.name] = selected; break; diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss index fb67d3232c..40f4f5eccd 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss @@ -1,5 +1,26 @@ -.consul-intention-list { - td.permissions { - color: $blue-500; - } +%consul-intention-list td.permissions { + color: $blue-500; +} +%consul-intention-list em { + --word-spacing: 0.25rem; +} +%consul-intention-list em span::before, +%consul-intention-list em span:first-child { + margin-right: var(--word-spacing); +} +%consul-intention-list em span:last-child { + margin-left: var(--word-spacing); +} +%consul-intention-list em span::before { + @extend %as-pseudo; +} +%consul-intention-list span[class|='nspace']::before { + @extend %with-folder-outline-mask; +} +%consul-intention-list span[class|='partition']::before { + @extend %with-user-team-mask; +} + +.consul-intention-list { + @extend %consul-intention-list; } diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs index ad3faa2d5d..25044226e8 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs @@ -25,7 +25,13 @@ as |item index|> {{item.SourceName}} {{/if}} {{! TODO: slugify }} - {{or item.SourceNS 'default'}} + + {{or item.SourcePartition 'default'}} / {{or item.SourceNS 'default'}} + @@ -39,7 +45,13 @@ as |item index|> {{item.DestinationName}} {{/if}} {{! TODO: slugify }} - {{or item.DestinationNS 'default'}} + + {{or item.DestinationPartition 'default'}} / {{or item.DestinationNS 'default'}} + @@ -53,6 +65,7 @@ as |item index|> {{/if}} +{{#if (or (can "write intention" item=item) (can "view CRD intention" item=item))}} - {{else}} + {{else if (can "view CRD intention" item=item)}}
  • +{{/if}} diff --git a/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs index 4e875f45ac..730dc7cc58 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs @@ -4,11 +4,11 @@
    Destination
    - {{item.DestinationName}}{{#if (env "CONSUL_NSPACES_ENABLED")}} / {{item.DestinationNS}}{{/if}} + {{item.DestinationName}}{{#if (can "use partitions")}} / {{item.DestinationPartition}}{{/if}}{{#if (can "use nspaces")}} / {{item.DestinationNS}}{{/if}}
    Source
    - {{item.SourceName}}{{#if (env "CONSUL_NSPACES_ENABLED")}} / {{item.SourceNS}}{{/if}} + {{item.SourceName}}{{#if (can "use partitions")}} / {{item.SourcePartition}}{{/if}}{{#if (can "use nspaces")}} / {{item.SourceNS}}{{/if}}
    {{#if item.Action}}
    Action
    diff --git a/ui/packages/consul-ui/app/components/consul/lock-session/list/index.hbs b/ui/packages/consul-ui/app/components/consul/lock-session/list/index.hbs index 90d177525c..450474ba48 100644 --- a/ui/packages/consul-ui/app/components/consul/lock-session/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/lock-session/list/index.hbs @@ -74,7 +74,7 @@ @@ -83,8 +83,8 @@

    {{message}}

    - - + + diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs index 1664303c5d..83ad29ad95 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs @@ -115,13 +115,6 @@ {{@nspace}} - {{#if (is-href 'dc.nspaces')}} - -

    - Namespaces themselves are not namespaced, so switching will not change the current view. -

    -     - {{/if}} {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}} 'default' }) SourceNS; + @attr('string', { defaultValue: () => '*' }) SourceName; - @attr('string', { defaultValue: () => 'default' }) DestinationNS; @attr('string', { defaultValue: () => '*' }) DestinationName; + @attr('string', { defaultValue: () => 'default' }) SourceNS; + @attr('string', { defaultValue: () => 'default' }) DestinationNS; + @attr('string', { defaultValue: () => 'default' }) SourcePartition; + @attr('string', { defaultValue: () => 'default' }) DestinationPartition; + @attr('number') Precedence; @attr('string', { defaultValue: () => 'consul' }) SourceType; @nullValue(undefined) @attr('string') Action; @@ -38,9 +41,4 @@ export default class Intention extends Model { ); return typeof meta !== 'undefined'; } - - @computed('IsManagedByCRD') - get IsEditable() { - return !this.IsManagedByCRD; - } } diff --git a/ui/packages/consul-ui/app/serializers/intention.js b/ui/packages/consul-ui/app/serializers/intention.js index 8c2d4bfd11..f2345c5745 100644 --- a/ui/packages/consul-ui/app/serializers/intention.js +++ b/ui/packages/consul-ui/app/serializers/intention.js @@ -22,7 +22,7 @@ export default class IntentionSerializer extends Serializer { item.LegacyID = item.ID; } item.ID = this - .uri`${item.SourceNS}:${item.SourceName}:${item.DestinationNS}:${item.DestinationName}`; + .uri`${item.SourcePartition}:${item.SourceNS}:${item.SourceName}:${item.DestinationPartition}:${item.DestinationNS}:${item.DestinationName}`; return item; } @@ -56,7 +56,7 @@ export default class IntentionSerializer extends Serializer { return respond((headers, body) => { body = data; body.ID = this - .uri`${serialized.SourceNS}:${serialized.SourceName}:${serialized.DestinationNS}:${serialized.DestinationName}`; + .uri`${serialized.SourcePartition}:${serialized.SourceNS}:${serialized.SourceName}:${serialized.DestinationPartition}:${serialized.DestinationNS}:${serialized.DestinationName}`; return this.fingerprint(primaryKey, slugKey, body.Datacenter)(body); }); } diff --git a/ui/packages/consul-ui/app/services/repository/intention.js b/ui/packages/consul-ui/app/services/repository/intention.js index 700590c0d0..aed23be75f 100644 --- a/ui/packages/consul-ui/app/services/repository/intention.js +++ b/ui/packages/consul-ui/app/services/repository/intention.js @@ -69,9 +69,12 @@ export default class IntentionRepository extends RepositoryService { let item; if (params.id === '') { const defaultNspace = this.env.var('CONSUL_NSPACES_ENABLED') ? '*' : 'default'; + const defaultPartition = this.env.var('CONSUL_PARTITIONS_ENABLED') ? '*' : 'default'; item = await this.create({ SourceNS: params.nspace || defaultNspace, DestinationNS: params.nspace || defaultNspace, + SourcePartition: params.partition || defaultPartition, + DestinationPartition: params.partition || defaultPartition, Datacenter: params.dc, Partition: params.partition, }); diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss index bbb1de4237..24b92ee5ed 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss @@ -1,3 +1,27 @@ +%activity-16-svg-prop { + --activity-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%activity-24-svg-prop { + --activity-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-circle-16-svg-prop { + --alert-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-circle-24-svg-prop { + --alert-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-circle-fill-16-svg-prop { + --alert-circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-circle-fill-24-svg-prop { + --alert-circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %alert-circle-fill-svg-prop { --alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -6,30 +30,470 @@ --alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%alert-octagon-16-svg-prop { + --alert-octagon-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-octagon-24-svg-prop { + --alert-octagon-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-octagon-fill-16-svg-prop { + --alert-octagon-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-octagon-fill-24-svg-prop { + --alert-octagon-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-triangle-16-svg-prop { + --alert-triangle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-triangle-24-svg-prop { + --alert-triangle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-triangle-fill-16-svg-prop { + --alert-triangle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-triangle-fill-24-svg-prop { + --alert-triangle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %alert-triangle-svg-prop { --alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%alibaba-16-svg-prop { + --alibaba-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alibaba-24-svg-prop { + --alibaba-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alibaba-color-16-svg-prop { + --alibaba-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alibaba-color-24-svg-prop { + --alibaba-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%align-center-16-svg-prop { + --align-center-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%align-center-24-svg-prop { + --align-center-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%align-justify-16-svg-prop { + --align-justify-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%align-justify-24-svg-prop { + --align-justify-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%align-left-16-svg-prop { + --align-left-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%align-left-24-svg-prop { + --align-left-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%align-right-16-svg-prop { + --align-right-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%align-right-24-svg-prop { + --align-right-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%apple-16-svg-prop { + --apple-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%apple-24-svg-prop { + --apple-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%apple-color-16-svg-prop { + --apple-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%apple-color-24-svg-prop { + --apple-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%archive-16-svg-prop { + --archive-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%archive-24-svg-prop { + --archive-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-down-16-svg-prop { + --arrow-down-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-down-24-svg-prop { + --arrow-down-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-down-circle-16-svg-prop { + --arrow-down-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-down-circle-24-svg-prop { + --arrow-down-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-down-left-16-svg-prop { + --arrow-down-left-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-down-left-24-svg-prop { + --arrow-down-left-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-down-right-16-svg-prop { + --arrow-down-right-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-down-right-24-svg-prop { + --arrow-down-right-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %arrow-down-svg-prop { --arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%arrow-left-16-svg-prop { + --arrow-left-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-left-24-svg-prop { + --arrow-left-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-left-circle-16-svg-prop { + --arrow-left-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-left-circle-24-svg-prop { + --arrow-left-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %arrow-left-svg-prop { --arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%arrow-right-16-svg-prop { + --arrow-right-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-right-24-svg-prop { + --arrow-right-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-right-circle-16-svg-prop { + --arrow-right-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-right-circle-24-svg-prop { + --arrow-right-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %arrow-right-svg-prop { --arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%arrow-up-16-svg-prop { + --arrow-up-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-up-24-svg-prop { + --arrow-up-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-up-circle-16-svg-prop { + --arrow-up-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-up-circle-24-svg-prop { + --arrow-up-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-up-left-16-svg-prop { + --arrow-up-left-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-up-left-24-svg-prop { + --arrow-up-left-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-up-right-16-svg-prop { + --arrow-up-right-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-up-right-24-svg-prop { + --arrow-up-right-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %arrow-up-svg-prop { --arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%at-sign-16-svg-prop { + --at-sign-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%at-sign-24-svg-prop { + --at-sign-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%auth0-16-svg-prop { + --auth0-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%auth0-24-svg-prop { + --auth0-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%auth0-color-16-svg-prop { + --auth0-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%auth0-color-24-svg-prop { + --auth0-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%auto-apply-16-svg-prop { + --auto-apply-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%auto-apply-24-svg-prop { + --auto-apply-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%award-16-svg-prop { + --award-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%award-24-svg-prop { + --award-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%aws-16-svg-prop { + --aws-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%aws-24-svg-prop { + --aws-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%aws-color-16-svg-prop { + --aws-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%aws-color-24-svg-prop { + --aws-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%azure-16-svg-prop { + --azure-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%azure-24-svg-prop { + --azure-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%azure-color-16-svg-prop { + --azure-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%azure-color-24-svg-prop { + --azure-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%azure-devops-16-svg-prop { + --azure-devops-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%azure-devops-24-svg-prop { + --azure-devops-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%azure-devops-color-16-svg-prop { + --azure-devops-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%azure-devops-color-24-svg-prop { + --azure-devops-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bar-chart-16-svg-prop { + --bar-chart-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bar-chart-24-svg-prop { + --bar-chart-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bar-chart-alt-16-svg-prop { + --bar-chart-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bar-chart-alt-24-svg-prop { + --bar-chart-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%battery-16-svg-prop { + --battery-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%battery-24-svg-prop { + --battery-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%battery-charging-16-svg-prop { + --battery-charging-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%battery-charging-24-svg-prop { + --battery-charging-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%beaker-16-svg-prop { + --beaker-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%beaker-24-svg-prop { + --beaker-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bell-16-svg-prop { + --bell-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bell-24-svg-prop { + --bell-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bell-active-16-svg-prop { + --bell-active-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bell-active-24-svg-prop { + --bell-active-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bell-active-fill-16-svg-prop { + --bell-active-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bell-active-fill-24-svg-prop { + --bell-active-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bell-off-16-svg-prop { + --bell-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bell-off-24-svg-prop { + --bell-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bitbucket-16-svg-prop { + --bitbucket-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bitbucket-24-svg-prop { + --bitbucket-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bitbucket-color-16-svg-prop { + --bitbucket-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bitbucket-color-24-svg-prop { + --bitbucket-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %bolt-svg-prop { --bolt-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%bookmark-16-svg-prop { + --bookmark-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-24-svg-prop { + --bookmark-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-add-16-svg-prop { + --bookmark-add-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-add-24-svg-prop { + --bookmark-add-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-add-fill-16-svg-prop { + --bookmark-add-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-add-fill-24-svg-prop { + --bookmark-add-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-fill-16-svg-prop { + --bookmark-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-fill-24-svg-prop { + --bookmark-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-remove-16-svg-prop { + --bookmark-remove-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-remove-24-svg-prop { + --bookmark-remove-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-remove-fill-16-svg-prop { + --bookmark-remove-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bookmark-remove-fill-24-svg-prop { + --bookmark-remove-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bottom-16-svg-prop { + --bottom-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bottom-24-svg-prop { + --bottom-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%box-16-svg-prop { + --box-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%box-24-svg-prop { + --box-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %box-check-fill-svg-prop { --box-check-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -38,18 +502,66 @@ --box-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%briefcase-16-svg-prop { + --briefcase-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%briefcase-24-svg-prop { + --briefcase-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %broadcast-svg-prop { --broadcast-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%bug-16-svg-prop { + --bug-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bug-24-svg-prop { + --bug-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %bug-svg-prop { --bug-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%build-16-svg-prop { + --build-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%build-24-svg-prop { + --build-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%calendar-16-svg-prop { + --calendar-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%calendar-24-svg-prop { + --calendar-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %calendar-svg-prop { --calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%camera-16-svg-prop { + --camera-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%camera-24-svg-prop { + --camera-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%camera-off-16-svg-prop { + --camera-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%camera-off-24-svg-prop { + --camera-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %cancel-circle-fill-svg-prop { --cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -70,6 +582,14 @@ --cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%caret-16-svg-prop { + --caret-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%caret-24-svg-prop { + --caret-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %caret-down-svg-prop { --caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -78,6 +598,70 @@ --caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%cast-16-svg-prop { + --cast-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cast-24-svg-prop { + --cast-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%certificate-16-svg-prop { + --certificate-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%certificate-24-svg-prop { + --certificate-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%change-16-svg-prop { + --change-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%change-24-svg-prop { + --change-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%change-circle-16-svg-prop { + --change-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%change-circle-24-svg-prop { + --change-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%change-square-16-svg-prop { + --change-square-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%change-square-24-svg-prop { + --change-square-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-16-svg-prop { + --check-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-24-svg-prop { + --check-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-circle-16-svg-prop { + --check-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-circle-24-svg-prop { + --check-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-circle-fill-16-svg-prop { + --check-circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-circle-fill-24-svg-prop { + --check-circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %check-circle-fill-svg-prop { --check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -86,26 +670,202 @@ --check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%check-diamond-16-svg-prop { + --check-diamond-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-diamond-24-svg-prop { + --check-diamond-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-diamond-fill-16-svg-prop { + --check-diamond-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-diamond-fill-24-svg-prop { + --check-diamond-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-hexagon-16-svg-prop { + --check-hexagon-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-hexagon-24-svg-prop { + --check-hexagon-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-hexagon-fill-16-svg-prop { + --check-hexagon-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-hexagon-fill-24-svg-prop { + --check-hexagon-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %check-plain-svg-prop { --check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%check-square-16-svg-prop { + --check-square-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-square-24-svg-prop { + --check-square-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-square-fill-16-svg-prop { + --check-square-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-square-fill-24-svg-prop { + --check-square-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-down-16-svg-prop { + --chevron-down-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-down-24-svg-prop { + --chevron-down-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %chevron-down-svg-prop { --chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%chevron-left-16-svg-prop { + --chevron-left-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-left-24-svg-prop { + --chevron-left-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %chevron-left-svg-prop { --chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%chevron-right-16-svg-prop { + --chevron-right-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-right-24-svg-prop { + --chevron-right-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %chevron-right-svg-prop { --chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%chevron-up-16-svg-prop { + --chevron-up-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-up-24-svg-prop { + --chevron-up-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %chevron-up-svg-prop { --chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%chevrons-down-16-svg-prop { + --chevrons-down-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevrons-down-24-svg-prop { + --chevrons-down-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevrons-left-16-svg-prop { + --chevrons-left-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevrons-left-24-svg-prop { + --chevrons-left-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevrons-right-16-svg-prop { + --chevrons-right-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevrons-right-24-svg-prop { + --chevrons-right-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevrons-up-16-svg-prop { + --chevrons-up-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevrons-up-24-svg-prop { + --chevrons-up-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%circle-16-svg-prop { + --circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%circle-24-svg-prop { + --circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%circle-dot-16-svg-prop { + --circle-dot-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%circle-dot-24-svg-prop { + --circle-dot-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%circle-fill-16-svg-prop { + --circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%circle-fill-24-svg-prop { + --circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%circle-half-16-svg-prop { + --circle-half-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%circle-half-24-svg-prop { + --circle-half-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%clipboard-16-svg-prop { + --clipboard-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%clipboard-24-svg-prop { + --clipboard-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%clipboard-checked-16-svg-prop { + --clipboard-checked-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%clipboard-checked-24-svg-prop { + --clipboard-checked-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%clipboard-copy-16-svg-prop { + --clipboard-copy-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%clipboard-copy-24-svg-prop { + --clipboard-copy-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%clock-16-svg-prop { + --clock-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%clock-24-svg-prop { + --clock-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %clock-fill-svg-prop { --clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -114,14 +874,126 @@ --clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%cloud-16-svg-prop { + --cloud-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-24-svg-prop { + --cloud-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-check-16-svg-prop { + --cloud-check-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-check-24-svg-prop { + --cloud-check-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %cloud-cross-svg-prop { --cloud-cross-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%cloud-download-16-svg-prop { + --cloud-download-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-download-24-svg-prop { + --cloud-download-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-lightning-16-svg-prop { + --cloud-lightning-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-lightning-24-svg-prop { + --cloud-lightning-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-lock-16-svg-prop { + --cloud-lock-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-lock-24-svg-prop { + --cloud-lock-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-off-16-svg-prop { + --cloud-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-off-24-svg-prop { + --cloud-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-upload-16-svg-prop { + --cloud-upload-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-upload-24-svg-prop { + --cloud-upload-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-x-16-svg-prop { + --cloud-x-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-x-24-svg-prop { + --cloud-x-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%code-16-svg-prop { + --code-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%code-24-svg-prop { + --code-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %code-svg-prop { --code-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%collections-16-svg-prop { + --collections-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%collections-24-svg-prop { + --collections-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%command-16-svg-prop { + --command-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%command-24-svg-prop { + --command-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%compass-16-svg-prop { + --compass-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%compass-24-svg-prop { + --compass-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%connection-16-svg-prop { + --connection-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%connection-24-svg-prop { + --connection-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%connection-gateway-16-svg-prop { + --connection-gateway-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%connection-gateway-24-svg-prop { + --connection-gateway-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %console-svg-prop { --console-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -134,14 +1006,142 @@ --copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%corner-down-left-16-svg-prop { + --corner-down-left-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-down-left-24-svg-prop { + --corner-down-left-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-down-right-16-svg-prop { + --corner-down-right-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-down-right-24-svg-prop { + --corner-down-right-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-left-down-16-svg-prop { + --corner-left-down-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-left-down-24-svg-prop { + --corner-left-down-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-left-up-16-svg-prop { + --corner-left-up-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-left-up-24-svg-prop { + --corner-left-up-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-right-down-16-svg-prop { + --corner-right-down-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-right-down-24-svg-prop { + --corner-right-down-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-right-up-16-svg-prop { + --corner-right-up-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-right-up-24-svg-prop { + --corner-right-up-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-up-left-16-svg-prop { + --corner-up-left-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-up-left-24-svg-prop { + --corner-up-left-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-up-right-16-svg-prop { + --corner-up-right-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%corner-up-right-24-svg-prop { + --corner-up-right-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cpu-16-svg-prop { + --cpu-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cpu-24-svg-prop { + --cpu-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%credit-card-16-svg-prop { + --credit-card-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%credit-card-24-svg-prop { + --credit-card-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%crop-16-svg-prop { + --crop-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%crop-24-svg-prop { + --crop-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%crosshair-16-svg-prop { + --crosshair-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%crosshair-24-svg-prop { + --crosshair-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%dashboard-16-svg-prop { + --dashboard-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%dashboard-24-svg-prop { + --dashboard-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%database-16-svg-prop { + --database-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%database-24-svg-prop { + --database-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %database-svg-prop { --database-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%delay-16-svg-prop { + --delay-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%delay-24-svg-prop { + --delay-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %delay-svg-prop { --delay-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%delete-16-svg-prop { + --delete-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%delete-24-svg-prop { + --delete-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %deny-alt-svg-prop { --deny-alt-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -154,22 +1154,166 @@ --deny-default-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%diamond-16-svg-prop { + --diamond-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%diamond-24-svg-prop { + --diamond-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%diamond-fill-16-svg-prop { + --diamond-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%diamond-fill-24-svg-prop { + --diamond-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %disabled-svg-prop { --disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%disc-16-svg-prop { + --disc-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%disc-24-svg-prop { + --disc-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%discussion-circle-16-svg-prop { + --discussion-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%discussion-circle-24-svg-prop { + --discussion-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%discussion-square-16-svg-prop { + --discussion-square-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%discussion-square-24-svg-prop { + --discussion-square-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docker-16-svg-prop { + --docker-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docker-24-svg-prop { + --docker-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docker-color-16-svg-prop { + --docker-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docker-color-24-svg-prop { + --docker-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docs-16-svg-prop { + --docs-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docs-24-svg-prop { + --docs-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docs-download-16-svg-prop { + --docs-download-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docs-download-24-svg-prop { + --docs-download-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docs-link-16-svg-prop { + --docs-link-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docs-link-24-svg-prop { + --docs-link-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %docs-svg-prop { --docs-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%dollar-sign-16-svg-prop { + --dollar-sign-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%dollar-sign-24-svg-prop { + --dollar-sign-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%dot-16-svg-prop { + --dot-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%dot-24-svg-prop { + --dot-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%dot-half-16-svg-prop { + --dot-half-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%dot-half-24-svg-prop { + --dot-half-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%download-16-svg-prop { + --download-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%download-24-svg-prop { + --download-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %download-svg-prop { --download-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%droplet-16-svg-prop { + --droplet-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%droplet-24-svg-prop { + --droplet-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%duplicate-16-svg-prop { + --duplicate-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%duplicate-24-svg-prop { + --duplicate-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%edit-16-svg-prop { + --edit-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%edit-24-svg-prop { + --edit-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %edit-svg-prop { --edit-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%entry-point-16-svg-prop { + --entry-point-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%entry-point-24-svg-prop { + --entry-point-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %envelope-sealed-fill-svg-prop { --envelope-sealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -186,6 +1330,22 @@ --envelope-unsealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%event-16-svg-prop { + --event-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%event-24-svg-prop { + --event-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%exit-point-16-svg-prop { + --exit-point-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%exit-point-24-svg-prop { + --exit-point-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %exit-svg-prop { --exit-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -198,34 +1358,314 @@ --expand-more-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%external-link-16-svg-prop { + --external-link-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%external-link-24-svg-prop { + --external-link-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%eye-16-svg-prop { + --eye-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%eye-24-svg-prop { + --eye-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%eye-off-16-svg-prop { + --eye-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%eye-off-24-svg-prop { + --eye-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%f5-16-svg-prop { + --f5-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%f5-24-svg-prop { + --f5-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%f5-color-16-svg-prop { + --f5-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%f5-color-24-svg-prop { + --f5-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%fast-forward-16-svg-prop { + --fast-forward-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%fast-forward-24-svg-prop { + --fast-forward-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-16-svg-prop { + --file-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-24-svg-prop { + --file-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-change-16-svg-prop { + --file-change-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-change-24-svg-prop { + --file-change-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-check-16-svg-prop { + --file-check-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-check-24-svg-prop { + --file-check-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-diff-16-svg-prop { + --file-diff-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-diff-24-svg-prop { + --file-diff-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %file-fill-svg-prop { --file-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%file-minus-16-svg-prop { + --file-minus-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-minus-24-svg-prop { + --file-minus-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %file-outline-svg-prop { --file-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%file-plus-16-svg-prop { + --file-plus-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-plus-24-svg-prop { + --file-plus-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-source-16-svg-prop { + --file-source-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-source-24-svg-prop { + --file-source-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-text-16-svg-prop { + --file-text-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-text-24-svg-prop { + --file-text-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-x-16-svg-prop { + --file-x-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-x-24-svg-prop { + --file-x-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%files-16-svg-prop { + --files-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%files-24-svg-prop { + --files-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%film-16-svg-prop { + --film-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%film-24-svg-prop { + --film-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%filter-16-svg-prop { + --filter-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%filter-24-svg-prop { + --filter-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%filter-circle-16-svg-prop { + --filter-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%filter-circle-24-svg-prop { + --filter-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%filter-fill-16-svg-prop { + --filter-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%filter-fill-24-svg-prop { + --filter-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %filter-svg-prop { --filter-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%fingerprint-16-svg-prop { + --fingerprint-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%fingerprint-24-svg-prop { + --fingerprint-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%flag-16-svg-prop { + --flag-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%flag-24-svg-prop { + --flag-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %flag-svg-prop { --flag-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%folder-16-svg-prop { + --folder-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-24-svg-prop { + --folder-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-fill-16-svg-prop { + --folder-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-fill-24-svg-prop { + --folder-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %folder-fill-svg-prop { --folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%folder-minus-16-svg-prop { + --folder-minus-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-minus-24-svg-prop { + --folder-minus-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-minus-fill-16-svg-prop { + --folder-minus-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-minus-fill-24-svg-prop { + --folder-minus-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %folder-outline-svg-prop { --folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%folder-plus-16-svg-prop { + --folder-plus-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-plus-24-svg-prop { + --folder-plus-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-plus-fill-16-svg-prop { + --folder-plus-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-plus-fill-24-svg-prop { + --folder-plus-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-star-16-svg-prop { + --folder-star-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-star-24-svg-prop { + --folder-star-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-users-16-svg-prop { + --folder-users-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-users-24-svg-prop { + --folder-users-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%frown-16-svg-prop { + --frown-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%frown-24-svg-prop { + --frown-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gateway-16-svg-prop { + --gateway-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gateway-24-svg-prop { + --gateway-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %gateway-svg-prop { --gateway-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%gcp-16-svg-prop { + --gcp-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gcp-24-svg-prop { + --gcp-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gcp-color-16-svg-prop { + --gcp-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gcp-color-24-svg-prop { + --gcp-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gift-16-svg-prop { + --gift-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gift-24-svg-prop { + --gift-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %gift-fill-svg-prop { --gift-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -234,30 +1674,230 @@ --gift-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%git-branch-16-svg-prop { + --git-branch-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%git-branch-24-svg-prop { + --git-branch-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %git-branch-svg-prop { --git-branch-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%git-commit-16-svg-prop { + --git-commit-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%git-commit-24-svg-prop { + --git-commit-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %git-commit-svg-prop { --git-commit-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%git-merge-16-svg-prop { + --git-merge-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%git-merge-24-svg-prop { + --git-merge-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%git-pull-request-16-svg-prop { + --git-pull-request-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%git-pull-request-24-svg-prop { + --git-pull-request-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %git-pull-request-svg-prop { --git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%git-repo-16-svg-prop { + --git-repo-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%git-repo-24-svg-prop { + --git-repo-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %git-repository-svg-prop { --git-repository-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%github-16-svg-prop { + --github-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%github-24-svg-prop { + --github-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%github-color-16-svg-prop { + --github-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%github-color-24-svg-prop { + --github-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gitlab-16-svg-prop { + --gitlab-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gitlab-24-svg-prop { + --gitlab-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gitlab-color-16-svg-prop { + --gitlab-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gitlab-color-24-svg-prop { + --gitlab-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%globe-16-svg-prop { + --globe-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%globe-24-svg-prop { + --globe-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%globe-private-16-svg-prop { + --globe-private-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%globe-private-24-svg-prop { + --globe-private-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%google-16-svg-prop { + --google-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%google-24-svg-prop { + --google-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%google-color-16-svg-prop { + --google-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%google-color-24-svg-prop { + --google-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%grid-16-svg-prop { + --grid-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%grid-24-svg-prop { + --grid-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%grid-alt-16-svg-prop { + --grid-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%grid-alt-24-svg-prop { + --grid-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%guide-16-svg-prop { + --guide-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%guide-24-svg-prop { + --guide-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%guide-link-16-svg-prop { + --guide-link-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%guide-link-24-svg-prop { + --guide-link-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %guide-svg-prop { --guide-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%hammer-16-svg-prop { + --hammer-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hammer-24-svg-prop { + --hammer-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hard-drive-16-svg-prop { + --hard-drive-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hard-drive-24-svg-prop { + --hard-drive-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hash-16-svg-prop { + --hash-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hash-24-svg-prop { + --hash-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%headphones-16-svg-prop { + --headphones-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%headphones-24-svg-prop { + --headphones-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %health-svg-prop { --health-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%heart-16-svg-prop { + --heart-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%heart-24-svg-prop { + --heart-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%heart-fill-16-svg-prop { + --heart-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%heart-fill-24-svg-prop { + --heart-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%heart-off-16-svg-prop { + --heart-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%heart-off-24-svg-prop { + --heart-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%help-16-svg-prop { + --help-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%help-24-svg-prop { + --help-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %help-circle-fill-svg-prop { --help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -266,10 +1906,90 @@ --help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%hexagon-16-svg-prop { + --hexagon-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hexagon-24-svg-prop { + --hexagon-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hexagon-fill-16-svg-prop { + --hexagon-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hexagon-fill-24-svg-prop { + --hexagon-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%history-16-svg-prop { + --history-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%history-24-svg-prop { + --history-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %history-svg-prop { --history-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%home-16-svg-prop { + --home-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%home-24-svg-prop { + --home-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hourglass-16-svg-prop { + --hourglass-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hourglass-24-svg-prop { + --hourglass-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%identity-service-16-svg-prop { + --identity-service-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%identity-service-24-svg-prop { + --identity-service-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%identity-user-16-svg-prop { + --identity-user-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%identity-user-24-svg-prop { + --identity-user-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%image-16-svg-prop { + --image-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%image-24-svg-prop { + --image-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%inbox-16-svg-prop { + --inbox-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%inbox-24-svg-prop { + --inbox-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%info-16-svg-prop { + --info-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%info-24-svg-prop { + --info-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %info-circle-fill-svg-prop { --info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -278,24 +1998,144 @@ --info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%jump-link-16-svg-prop { + --jump-link-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%jump-link-24-svg-prop { + --jump-link-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%key-16-svg-prop { + --key-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%key-24-svg-prop { + --key-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%key-values-16-svg-prop { + --key-values-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%key-values-24-svg-prop { + --key-values-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %key-svg-prop { --key-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%kubernetes-16-svg-prop { + --kubernetes-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%kubernetes-24-svg-prop { + --kubernetes-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%kubernetes-color-16-svg-prop { + --kubernetes-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%kubernetes-color-24-svg-prop { + --kubernetes-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%labyrinth-16-svg-prop { + --labyrinth-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%labyrinth-24-svg-prop { + --labyrinth-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%layers-16-svg-prop { + --layers-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%layers-24-svg-prop { + --layers-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %layers-svg-prop { --layers-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%layout-16-svg-prop { + --layout-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%layout-24-svg-prop { + --layout-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%learn-16-svg-prop { + --learn-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%learn-24-svg-prop { + --learn-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%learn-link-16-svg-prop { + --learn-link-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%learn-link-24-svg-prop { + --learn-link-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %learn-svg-prop { --learn-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%line-chart-16-svg-prop { + --line-chart-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%line-chart-24-svg-prop { + --line-chart-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%line-chart-up-16-svg-prop { + --line-chart-up-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%line-chart-up-24-svg-prop { + --line-chart-up-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%link-16-svg-prop { + --link-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%link-24-svg-prop { + --link-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %link-svg-prop { --link-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%list-16-svg-prop { + --list-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%list-24-svg-prop { + --list-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %loading-svg-prop { - --loading-svg: url('data:image/svg+xml;charset=UTF-8,'); + --loading-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%lock-16-svg-prop { + --lock-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%lock-24-svg-prop { + --lock-24-svg: url('data:image/svg+xml;charset=UTF-8,'); } %lock-closed-fill-svg-prop { @@ -314,6 +2154,22 @@ --lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%lock-fill-16-svg-prop { + --lock-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%lock-fill-24-svg-prop { + --lock-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%lock-off-16-svg-prop { + --lock-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%lock-off-24-svg-prop { + --lock-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %lock-open-svg-prop { --lock-open-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -459,7 +2315,7 @@ } %logo-vault-color-svg-prop { - --logo-vault-color-svg: url('data:image/svg+xml;charset=UTF-8,'); + --logo-vault-color-svg: url('data:image/svg+xml;charset=UTF-8,'); } %logo-vmware-color-svg-prop { @@ -470,18 +2326,194 @@ --logo-vmware-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%mail-16-svg-prop { + --mail-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%mail-24-svg-prop { + --mail-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%mail-open-16-svg-prop { + --mail-open-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%mail-open-24-svg-prop { + --mail-open-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%map-16-svg-prop { + --map-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%map-24-svg-prop { + --map-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%map-pin-16-svg-prop { + --map-pin-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%map-pin-24-svg-prop { + --map-pin-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%maximize-16-svg-prop { + --maximize-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%maximize-24-svg-prop { + --maximize-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%maximize-alt-16-svg-prop { + --maximize-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%maximize-alt-24-svg-prop { + --maximize-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%meh-16-svg-prop { + --meh-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%meh-24-svg-prop { + --meh-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%menu-16-svg-prop { + --menu-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%menu-24-svg-prop { + --menu-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %menu-svg-prop { --menu-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%mesh-16-svg-prop { + --mesh-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%mesh-24-svg-prop { + --mesh-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %mesh-svg-prop { --mesh-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%message-circle-16-svg-prop { + --message-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%message-circle-24-svg-prop { + --message-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%message-circle-fill-16-svg-prop { + --message-circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%message-circle-fill-24-svg-prop { + --message-circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%message-square-16-svg-prop { + --message-square-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%message-square-24-svg-prop { + --message-square-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%message-square-fill-16-svg-prop { + --message-square-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%message-square-fill-24-svg-prop { + --message-square-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %message-svg-prop { --message-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%mic-16-svg-prop { + --mic-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%mic-24-svg-prop { + --mic-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%mic-off-16-svg-prop { + --mic-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%mic-off-24-svg-prop { + --mic-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%microsoft-16-svg-prop { + --microsoft-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%microsoft-24-svg-prop { + --microsoft-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%microsoft-color-16-svg-prop { + --microsoft-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%microsoft-color-24-svg-prop { + --microsoft-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%migrate-16-svg-prop { + --migrate-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%migrate-24-svg-prop { + --migrate-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minimize-16-svg-prop { + --minimize-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minimize-24-svg-prop { + --minimize-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minimize-alt-16-svg-prop { + --minimize-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minimize-alt-24-svg-prop { + --minimize-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-16-svg-prop { + --minus-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-24-svg-prop { + --minus-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-circle-16-svg-prop { + --minus-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-circle-24-svg-prop { + --minus-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %minus-circle-fill-svg-prop { --minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -494,22 +2526,166 @@ --minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%minus-plus-16-svg-prop { + --minus-plus-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-plus-24-svg-prop { + --minus-plus-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-plus-circle-16-svg-prop { + --minus-plus-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-plus-circle-24-svg-prop { + --minus-plus-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-plus-square-16-svg-prop { + --minus-plus-square-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-plus-square-24-svg-prop { + --minus-plus-square-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-square-16-svg-prop { + --minus-square-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-square-24-svg-prop { + --minus-square-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %minus-square-fill-svg-prop { --minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%module-16-svg-prop { + --module-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%module-24-svg-prop { + --module-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %module-svg-prop { --module-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%monitor-16-svg-prop { + --monitor-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%monitor-24-svg-prop { + --monitor-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%moon-16-svg-prop { + --moon-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%moon-24-svg-prop { + --moon-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%more-horizontal-16-svg-prop { + --more-horizontal-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%more-horizontal-24-svg-prop { + --more-horizontal-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %more-horizontal-svg-prop { --more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%more-vertical-16-svg-prop { + --more-vertical-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%more-vertical-24-svg-prop { + --more-vertical-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %more-vertical-svg-prop { --more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%mouse-pointer-16-svg-prop { + --mouse-pointer-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%mouse-pointer-24-svg-prop { + --mouse-pointer-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%move-16-svg-prop { + --move-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%move-24-svg-prop { + --move-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%music-16-svg-prop { + --music-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%music-24-svg-prop { + --music-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%navigation-16-svg-prop { + --navigation-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%navigation-24-svg-prop { + --navigation-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%navigation-alt-16-svg-prop { + --navigation-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%navigation-alt-24-svg-prop { + --navigation-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%network-16-svg-prop { + --network-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%network-24-svg-prop { + --network-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%network-alt-16-svg-prop { + --network-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%network-alt-24-svg-prop { + --network-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%newspaper-16-svg-prop { + --newspaper-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%newspaper-24-svg-prop { + --newspaper-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%node-16-svg-prop { + --node-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%node-24-svg-prop { + --node-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %notification-disabled-svg-prop { --notification-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -522,22 +2698,190 @@ --notification-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%octagon-16-svg-prop { + --octagon-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%octagon-24-svg-prop { + --octagon-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%okta-16-svg-prop { + --okta-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%okta-24-svg-prop { + --okta-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%okta-color-16-svg-prop { + --okta-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%okta-color-24-svg-prop { + --okta-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%oracle-16-svg-prop { + --oracle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%oracle-24-svg-prop { + --oracle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%oracle-color-16-svg-prop { + --oracle-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%oracle-color-24-svg-prop { + --oracle-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%org-16-svg-prop { + --org-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%org-24-svg-prop { + --org-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%outline-16-svg-prop { + --outline-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%outline-24-svg-prop { + --outline-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %outline-svg-prop { --outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%package-16-svg-prop { + --package-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%package-24-svg-prop { + --package-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %page-outline-svg-prop { --page-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%paperclip-16-svg-prop { + --paperclip-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%paperclip-24-svg-prop { + --paperclip-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %partner-svg-prop { --partner-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%path-16-svg-prop { + --path-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%path-24-svg-prop { + --path-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %path-svg-prop { --path-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%pause-16-svg-prop { + --pause-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pause-24-svg-prop { + --pause-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pause-circle-16-svg-prop { + --pause-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pause-circle-24-svg-prop { + --pause-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pen-tool-16-svg-prop { + --pen-tool-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pen-tool-24-svg-prop { + --pen-tool-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pencil-tool-16-svg-prop { + --pencil-tool-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pencil-tool-24-svg-prop { + --pencil-tool-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%phone-16-svg-prop { + --phone-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%phone-24-svg-prop { + --phone-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%phone-call-16-svg-prop { + --phone-call-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%phone-call-24-svg-prop { + --phone-call-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%phone-off-16-svg-prop { + --phone-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%phone-off-24-svg-prop { + --phone-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pie-chart-16-svg-prop { + --pie-chart-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pie-chart-24-svg-prop { + --pie-chart-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pin-16-svg-prop { + --pin-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%pin-24-svg-prop { + --pin-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%play-16-svg-prop { + --play-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%play-24-svg-prop { + --play-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%play-circle-16-svg-prop { + --play-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%play-circle-24-svg-prop { + --play-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %play-fill-svg-prop { --play-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -550,6 +2894,22 @@ --play-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%plus-16-svg-prop { + --plus-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%plus-24-svg-prop { + --plus-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%plus-circle-16-svg-prop { + --plus-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%plus-circle-24-svg-prop { + --plus-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %plus-circle-fill-svg-prop { --plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -562,6 +2922,14 @@ --plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%plus-square-16-svg-prop { + --plus-square-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%plus-square-24-svg-prop { + --plus-square-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %plus-square-fill-svg-prop { --plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -570,10 +2938,34 @@ --port-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%power-16-svg-prop { + --power-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%power-24-svg-prop { + --power-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%printer-16-svg-prop { + --printer-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%printer-24-svg-prop { + --printer-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %protocol-svg-prop { --protocol-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%provider-16-svg-prop { + --provider-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%provider-24-svg-prop { + --provider-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %provider-svg-prop { --provider-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -586,10 +2978,26 @@ --public-locked-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%queue-16-svg-prop { + --queue-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%queue-24-svg-prop { + --queue-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %queue-svg-prop { --queue-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%radio-16-svg-prop { + --radio-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%radio-24-svg-prop { + --radio-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %radio-button-checked-svg-prop { --radio-button-checked-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -598,12 +3006,28 @@ --radio-button-unchecked-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%random-16-svg-prop { + --random-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%random-24-svg-prop { + --random-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %random-svg-prop { --random-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%redirect-16-svg-prop { + --redirect-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%redirect-24-svg-prop { + --redirect-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %redirect-svg-prop { - --redirect-svg: url('data:image/svg+xml;charset=UTF-8,'); + --redirect-svg: url('data:image/svg+xml;charset=UTF-8,'); } %refresh-alert-svg-prop { @@ -614,16 +3038,112 @@ --refresh-default-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%reload-16-svg-prop { + --reload-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%reload-24-svg-prop { + --reload-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %remix-svg-prop { --remix-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%repeat-16-svg-prop { + --repeat-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%repeat-24-svg-prop { + --repeat-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%replication-direct-16-svg-prop { + --replication-direct-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%replication-direct-24-svg-prop { + --replication-direct-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%replication-perf-16-svg-prop { + --replication-perf-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%replication-perf-24-svg-prop { + --replication-perf-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%rewind-16-svg-prop { + --rewind-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%rewind-24-svg-prop { + --rewind-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %ribbon-svg-prop { --ribbon-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%rocket-16-svg-prop { + --rocket-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%rocket-24-svg-prop { + --rocket-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%rotate-ccw-16-svg-prop { + --rotate-ccw-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%rotate-ccw-24-svg-prop { + --rotate-ccw-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%rotate-cw-16-svg-prop { + --rotate-cw-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%rotate-cw-24-svg-prop { + --rotate-cw-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%rss-16-svg-prop { + --rss-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%rss-24-svg-prop { + --rss-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %run-svg-prop { - --run-svg: url('data:image/svg+xml;charset=UTF-8,'); + --run-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%save-16-svg-prop { + --save-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%save-24-svg-prop { + --save-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%scissors-16-svg-prop { + --scissors-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%scissors-24-svg-prop { + --scissors-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%search-16-svg-prop { + --search-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%search-24-svg-prop { + --search-24-svg: url('data:image/svg+xml;charset=UTF-8,'); } %search-color-svg-prop { @@ -634,12 +3154,268 @@ --search-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%send-16-svg-prop { + --send-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%send-24-svg-prop { + --send-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%server-16-svg-prop { + --server-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%server-24-svg-prop { + --server-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%server-cluster-16-svg-prop { + --server-cluster-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%server-cluster-24-svg-prop { + --server-cluster-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%serverless-16-svg-prop { + --serverless-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%serverless-24-svg-prop { + --serverless-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%settings-16-svg-prop { + --settings-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%settings-24-svg-prop { + --settings-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %settings-svg-prop { --settings-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%share-16-svg-prop { + --share-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%share-24-svg-prop { + --share-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shield-16-svg-prop { + --shield-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shield-24-svg-prop { + --shield-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shield-alert-16-svg-prop { + --shield-alert-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shield-alert-24-svg-prop { + --shield-alert-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shield-check-16-svg-prop { + --shield-check-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shield-check-24-svg-prop { + --shield-check-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shield-off-16-svg-prop { + --shield-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shield-off-24-svg-prop { + --shield-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shield-x-16-svg-prop { + --shield-x-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shield-x-24-svg-prop { + --shield-x-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shopping-bag-16-svg-prop { + --shopping-bag-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shopping-bag-24-svg-prop { + --shopping-bag-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shopping-cart-16-svg-prop { + --shopping-cart-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shopping-cart-24-svg-prop { + --shopping-cart-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shuffle-16-svg-prop { + --shuffle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%shuffle-24-svg-prop { + --shuffle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sidebar-16-svg-prop { + --sidebar-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sidebar-24-svg-prop { + --sidebar-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sidebar-hide-16-svg-prop { + --sidebar-hide-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sidebar-hide-24-svg-prop { + --sidebar-hide-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sidebar-show-16-svg-prop { + --sidebar-show-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sidebar-show-24-svg-prop { + --sidebar-show-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sign-in-16-svg-prop { + --sign-in-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sign-in-24-svg-prop { + --sign-in-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sign-out-16-svg-prop { + --sign-out-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sign-out-24-svg-prop { + --sign-out-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%skip-16-svg-prop { + --skip-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%skip-24-svg-prop { + --skip-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%skip-back-16-svg-prop { + --skip-back-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%skip-back-24-svg-prop { + --skip-back-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%skip-forward-16-svg-prop { + --skip-forward-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%skip-forward-24-svg-prop { + --skip-forward-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%slack-16-svg-prop { + --slack-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%slack-24-svg-prop { + --slack-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%slack-color-16-svg-prop { + --slack-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%slack-color-24-svg-prop { + --slack-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%slash-16-svg-prop { + --slash-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%slash-24-svg-prop { + --slash-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%slash-square-16-svg-prop { + --slash-square-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%slash-square-24-svg-prop { + --slash-square-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sliders-16-svg-prop { + --sliders-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sliders-24-svg-prop { + --sliders-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%smartphone-16-svg-prop { + --smartphone-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%smartphone-24-svg-prop { + --smartphone-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%smile-16-svg-prop { + --smile-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%smile-24-svg-prop { + --smile-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%socket-16-svg-prop { + --socket-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%socket-24-svg-prop { + --socket-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %socket-svg-prop { - --socket-svg: url('data:image/svg+xml;charset=UTF-8,'); + --socket-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sort-asc-16-svg-prop { + --sort-asc-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sort-asc-24-svg-prop { + --sort-asc-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sort-desc-16-svg-prop { + --sort-desc-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sort-desc-24-svg-prop { + --sort-desc-24-svg: url('data:image/svg+xml;charset=UTF-8,'); } %sort-svg-prop { @@ -650,14 +3426,78 @@ --source-file-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%speaker-16-svg-prop { + --speaker-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%speaker-24-svg-prop { + --speaker-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%square-16-svg-prop { + --square-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%square-24-svg-prop { + --square-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%square-fill-16-svg-prop { + --square-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%square-fill-24-svg-prop { + --square-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%star-16-svg-prop { + --star-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%star-24-svg-prop { + --star-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%star-circle-16-svg-prop { + --star-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%star-circle-24-svg-prop { + --star-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%star-fill-16-svg-prop { + --star-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%star-fill-24-svg-prop { + --star-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %star-fill-svg-prop { --star-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%star-off-16-svg-prop { + --star-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%star-off-24-svg-prop { + --star-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %star-outline-svg-prop { --star-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%stop-circle-16-svg-prop { + --stop-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%stop-circle-24-svg-prop { + --stop-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %sub-left-svg-prop { --sub-left-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -666,30 +3506,262 @@ --sub-right-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%sun-16-svg-prop { + --sun-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sun-24-svg-prop { + --sun-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%support-16-svg-prop { + --support-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%support-24-svg-prop { + --support-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %support-svg-prop { --support-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%swap-horizontal-16-svg-prop { + --swap-horizontal-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%swap-horizontal-24-svg-prop { + --swap-horizontal-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %swap-horizontal-svg-prop { --swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%swap-vertical-16-svg-prop { + --swap-vertical-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%swap-vertical-24-svg-prop { + --swap-vertical-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %swap-vertical-svg-prop { --swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%switcher-16-svg-prop { + --switcher-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%switcher-24-svg-prop { + --switcher-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sync-16-svg-prop { + --sync-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sync-24-svg-prop { + --sync-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sync-alert-16-svg-prop { + --sync-alert-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sync-alert-24-svg-prop { + --sync-alert-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sync-reverse-16-svg-prop { + --sync-reverse-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sync-reverse-24-svg-prop { + --sync-reverse-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%tablet-16-svg-prop { + --tablet-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%tablet-24-svg-prop { + --tablet-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%tag-16-svg-prop { + --tag-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%tag-24-svg-prop { + --tag-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %tag-svg-prop { --tag-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%target-16-svg-prop { + --target-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%target-24-svg-prop { + --target-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%terminal-16-svg-prop { + --terminal-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%terminal-24-svg-prop { + --terminal-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%terminal-screen-16-svg-prop { + --terminal-screen-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%terminal-screen-24-svg-prop { + --terminal-screen-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%thumbs-down-16-svg-prop { + --thumbs-down-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%thumbs-down-24-svg-prop { + --thumbs-down-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%thumbs-up-16-svg-prop { + --thumbs-up-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%thumbs-up-24-svg-prop { + --thumbs-up-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%toggle-left-16-svg-prop { + --toggle-left-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%toggle-left-24-svg-prop { + --toggle-left-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%toggle-right-16-svg-prop { + --toggle-right-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%toggle-right-24-svg-prop { + --toggle-right-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%token-16-svg-prop { + --token-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%token-24-svg-prop { + --token-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%tools-16-svg-prop { + --tools-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%tools-24-svg-prop { + --tools-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%top-16-svg-prop { + --top-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%top-24-svg-prop { + --top-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%trash-16-svg-prop { + --trash-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%trash-24-svg-prop { + --trash-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %trash-svg-prop { --trash-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%trend-down-16-svg-prop { + --trend-down-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%trend-down-24-svg-prop { + --trend-down-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%trend-up-16-svg-prop { + --trend-up-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%trend-up-24-svg-prop { + --trend-up-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%triangle-16-svg-prop { + --triangle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%triangle-24-svg-prop { + --triangle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%triangle-fill-16-svg-prop { + --triangle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%triangle-fill-24-svg-prop { + --triangle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%truck-16-svg-prop { + --truck-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%truck-24-svg-prop { + --truck-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %tune-svg-prop { --tune-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%tv-16-svg-prop { + --tv-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%tv-24-svg-prop { + --tv-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%type-16-svg-prop { + --type-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%type-24-svg-prop { + --type-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%unfold-close-16-svg-prop { + --unfold-close-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%unfold-close-24-svg-prop { + --unfold-close-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %unfold-less-svg-prop { --unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -698,14 +3770,78 @@ --unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%unfold-open-16-svg-prop { + --unfold-open-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%unfold-open-24-svg-prop { + --unfold-open-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%unlock-16-svg-prop { + --unlock-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%unlock-24-svg-prop { + --unlock-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%upload-16-svg-prop { + --upload-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%upload-24-svg-prop { + --upload-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %upload-svg-prop { --upload-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%user-16-svg-prop { + --user-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-24-svg-prop { + --user-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %user-add-svg-prop { --user-add-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%user-check-16-svg-prop { + --user-check-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-check-24-svg-prop { + --user-check-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-circle-16-svg-prop { + --user-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-circle-24-svg-prop { + --user-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-circle-fill-16-svg-prop { + --user-circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-circle-fill-24-svg-prop { + --user-circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-minus-16-svg-prop { + --user-minus-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-minus-24-svg-prop { + --user-minus-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %user-organization-svg-prop { --user-organization-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -714,6 +3850,14 @@ --user-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%user-plus-16-svg-prop { + --user-plus-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-plus-24-svg-prop { + --user-plus-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %user-square-fill-svg-prop { --user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -726,6 +3870,54 @@ --user-team-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%user-x-16-svg-prop { + --user-x-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-x-24-svg-prop { + --user-x-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%users-16-svg-prop { + --users-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%users-24-svg-prop { + --users-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%vault-16-svg-prop { + --vault-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%vault-24-svg-prop { + --vault-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%verified-16-svg-prop { + --verified-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%verified-24-svg-prop { + --verified-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%video-16-svg-prop { + --video-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%video-24-svg-prop { + --video-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%video-off-16-svg-prop { + --video-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%video-off-24-svg-prop { + --video-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %visibility-hide-svg-prop { --visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -734,6 +3926,206 @@ --visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%vmware-16-svg-prop { + --vmware-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%vmware-24-svg-prop { + --vmware-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%vmware-color-16-svg-prop { + --vmware-color-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%vmware-color-24-svg-prop { + --vmware-color-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%volume-16-svg-prop { + --volume-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%volume-2-16-svg-prop { + --volume-2-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%volume-2-24-svg-prop { + --volume-2-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%volume-24-svg-prop { + --volume-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%volume-down-16-svg-prop { + --volume-down-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%volume-down-24-svg-prop { + --volume-down-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%volume-x-16-svg-prop { + --volume-x-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%volume-x-24-svg-prop { + --volume-x-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%wall-16-svg-prop { + --wall-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%wall-24-svg-prop { + --wall-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%watch-16-svg-prop { + --watch-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%watch-24-svg-prop { + --watch-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%webhook-16-svg-prop { + --webhook-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%webhook-24-svg-prop { + --webhook-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %webhook-svg-prop { --webhook-svg: url('data:image/svg+xml;charset=UTF-8,'); } + +%wifi-16-svg-prop { + --wifi-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%wifi-24-svg-prop { + --wifi-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%wifi-off-16-svg-prop { + --wifi-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%wifi-off-24-svg-prop { + --wifi-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%wrench-16-svg-prop { + --wrench-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%wrench-24-svg-prop { + --wrench-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-16-svg-prop { + --x-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-24-svg-prop { + --x-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-circle-16-svg-prop { + --x-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-circle-24-svg-prop { + --x-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-circle-fill-16-svg-prop { + --x-circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-circle-fill-24-svg-prop { + --x-circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-diamond-16-svg-prop { + --x-diamond-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-diamond-24-svg-prop { + --x-diamond-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-diamond-fill-16-svg-prop { + --x-diamond-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-diamond-fill-24-svg-prop { + --x-diamond-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-hexagon-16-svg-prop { + --x-hexagon-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-hexagon-24-svg-prop { + --x-hexagon-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-hexagon-fill-16-svg-prop { + --x-hexagon-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-hexagon-fill-24-svg-prop { + --x-hexagon-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-square-16-svg-prop { + --x-square-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-square-24-svg-prop { + --x-square-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-square-fill-16-svg-prop { + --x-square-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%x-square-fill-24-svg-prop { + --x-square-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%zap-16-svg-prop { + --zap-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%zap-24-svg-prop { + --zap-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%zap-off-16-svg-prop { + --zap-off-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%zap-off-24-svg-prop { + --zap-off-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%zoom-in-16-svg-prop { + --zoom-in-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%zoom-in-24-svg-prop { + --zoom-in-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%zoom-out-16-svg-prop { + --zoom-out-16-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%zoom-out-24-svg-prop { + --zoom-out-24-svg: url('data:image/svg+xml;charset=UTF-8,'); +} diff --git a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss index 7c91433e37..558c9ce921 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss @@ -1,3 +1,63 @@ +%with-activity-16-icon { + @extend %with-icon, %activity-16-svg-prop; + background-image: var(--activity-16-svg); +} +%with-activity-16-mask { + @extend %with-mask, %activity-16-svg-prop; + -webkit-mask-image: var(--activity-16-svg); + mask-image: var(--activity-16-svg); +} + +%with-activity-24-icon { + @extend %with-icon, %activity-24-svg-prop; + background-image: var(--activity-24-svg); +} +%with-activity-24-mask { + @extend %with-mask, %activity-24-svg-prop; + -webkit-mask-image: var(--activity-24-svg); + mask-image: var(--activity-24-svg); +} + +%with-alert-circle-16-icon { + @extend %with-icon, %alert-circle-16-svg-prop; + background-image: var(--alert-circle-16-svg); +} +%with-alert-circle-16-mask { + @extend %with-mask, %alert-circle-16-svg-prop; + -webkit-mask-image: var(--alert-circle-16-svg); + mask-image: var(--alert-circle-16-svg); +} + +%with-alert-circle-24-icon { + @extend %with-icon, %alert-circle-24-svg-prop; + background-image: var(--alert-circle-24-svg); +} +%with-alert-circle-24-mask { + @extend %with-mask, %alert-circle-24-svg-prop; + -webkit-mask-image: var(--alert-circle-24-svg); + mask-image: var(--alert-circle-24-svg); +} + +%with-alert-circle-fill-16-icon { + @extend %with-icon, %alert-circle-fill-16-svg-prop; + background-image: var(--alert-circle-fill-16-svg); +} +%with-alert-circle-fill-16-mask { + @extend %with-mask, %alert-circle-fill-16-svg-prop; + -webkit-mask-image: var(--alert-circle-fill-16-svg); + mask-image: var(--alert-circle-fill-16-svg); +} + +%with-alert-circle-fill-24-icon { + @extend %with-icon, %alert-circle-fill-24-svg-prop; + background-image: var(--alert-circle-fill-24-svg); +} +%with-alert-circle-fill-24-mask { + @extend %with-mask, %alert-circle-fill-24-svg-prop; + -webkit-mask-image: var(--alert-circle-fill-24-svg); + mask-image: var(--alert-circle-fill-24-svg); +} + %with-alert-circle-fill-icon { @extend %with-icon, %alert-circle-fill-svg-prop; background-image: var(--alert-circle-fill-svg); @@ -18,6 +78,86 @@ mask-image: var(--alert-circle-outline-svg); } +%with-alert-octagon-16-icon { + @extend %with-icon, %alert-octagon-16-svg-prop; + background-image: var(--alert-octagon-16-svg); +} +%with-alert-octagon-16-mask { + @extend %with-mask, %alert-octagon-16-svg-prop; + -webkit-mask-image: var(--alert-octagon-16-svg); + mask-image: var(--alert-octagon-16-svg); +} + +%with-alert-octagon-24-icon { + @extend %with-icon, %alert-octagon-24-svg-prop; + background-image: var(--alert-octagon-24-svg); +} +%with-alert-octagon-24-mask { + @extend %with-mask, %alert-octagon-24-svg-prop; + -webkit-mask-image: var(--alert-octagon-24-svg); + mask-image: var(--alert-octagon-24-svg); +} + +%with-alert-octagon-fill-16-icon { + @extend %with-icon, %alert-octagon-fill-16-svg-prop; + background-image: var(--alert-octagon-fill-16-svg); +} +%with-alert-octagon-fill-16-mask { + @extend %with-mask, %alert-octagon-fill-16-svg-prop; + -webkit-mask-image: var(--alert-octagon-fill-16-svg); + mask-image: var(--alert-octagon-fill-16-svg); +} + +%with-alert-octagon-fill-24-icon { + @extend %with-icon, %alert-octagon-fill-24-svg-prop; + background-image: var(--alert-octagon-fill-24-svg); +} +%with-alert-octagon-fill-24-mask { + @extend %with-mask, %alert-octagon-fill-24-svg-prop; + -webkit-mask-image: var(--alert-octagon-fill-24-svg); + mask-image: var(--alert-octagon-fill-24-svg); +} + +%with-alert-triangle-16-icon { + @extend %with-icon, %alert-triangle-16-svg-prop; + background-image: var(--alert-triangle-16-svg); +} +%with-alert-triangle-16-mask { + @extend %with-mask, %alert-triangle-16-svg-prop; + -webkit-mask-image: var(--alert-triangle-16-svg); + mask-image: var(--alert-triangle-16-svg); +} + +%with-alert-triangle-24-icon { + @extend %with-icon, %alert-triangle-24-svg-prop; + background-image: var(--alert-triangle-24-svg); +} +%with-alert-triangle-24-mask { + @extend %with-mask, %alert-triangle-24-svg-prop; + -webkit-mask-image: var(--alert-triangle-24-svg); + mask-image: var(--alert-triangle-24-svg); +} + +%with-alert-triangle-fill-16-icon { + @extend %with-icon, %alert-triangle-fill-16-svg-prop; + background-image: var(--alert-triangle-fill-16-svg); +} +%with-alert-triangle-fill-16-mask { + @extend %with-mask, %alert-triangle-fill-16-svg-prop; + -webkit-mask-image: var(--alert-triangle-fill-16-svg); + mask-image: var(--alert-triangle-fill-16-svg); +} + +%with-alert-triangle-fill-24-icon { + @extend %with-icon, %alert-triangle-fill-24-svg-prop; + background-image: var(--alert-triangle-fill-24-svg); +} +%with-alert-triangle-fill-24-mask { + @extend %with-mask, %alert-triangle-fill-24-svg-prop; + -webkit-mask-image: var(--alert-triangle-fill-24-svg); + mask-image: var(--alert-triangle-fill-24-svg); +} + %with-alert-triangle-icon { @extend %with-icon, %alert-triangle-svg-prop; background-image: var(--alert-triangle-svg); @@ -28,6 +168,266 @@ mask-image: var(--alert-triangle-svg); } +%with-alibaba-16-icon { + @extend %with-icon, %alibaba-16-svg-prop; + background-image: var(--alibaba-16-svg); +} +%with-alibaba-16-mask { + @extend %with-mask, %alibaba-16-svg-prop; + -webkit-mask-image: var(--alibaba-16-svg); + mask-image: var(--alibaba-16-svg); +} + +%with-alibaba-24-icon { + @extend %with-icon, %alibaba-24-svg-prop; + background-image: var(--alibaba-24-svg); +} +%with-alibaba-24-mask { + @extend %with-mask, %alibaba-24-svg-prop; + -webkit-mask-image: var(--alibaba-24-svg); + mask-image: var(--alibaba-24-svg); +} + +%with-alibaba-color-16-icon { + @extend %with-icon, %alibaba-color-16-svg-prop; + background-image: var(--alibaba-color-16-svg); +} +%with-alibaba-color-16-mask { + @extend %with-mask, %alibaba-color-16-svg-prop; + -webkit-mask-image: var(--alibaba-color-16-svg); + mask-image: var(--alibaba-color-16-svg); +} + +%with-alibaba-color-24-icon { + @extend %with-icon, %alibaba-color-24-svg-prop; + background-image: var(--alibaba-color-24-svg); +} +%with-alibaba-color-24-mask { + @extend %with-mask, %alibaba-color-24-svg-prop; + -webkit-mask-image: var(--alibaba-color-24-svg); + mask-image: var(--alibaba-color-24-svg); +} + +%with-align-center-16-icon { + @extend %with-icon, %align-center-16-svg-prop; + background-image: var(--align-center-16-svg); +} +%with-align-center-16-mask { + @extend %with-mask, %align-center-16-svg-prop; + -webkit-mask-image: var(--align-center-16-svg); + mask-image: var(--align-center-16-svg); +} + +%with-align-center-24-icon { + @extend %with-icon, %align-center-24-svg-prop; + background-image: var(--align-center-24-svg); +} +%with-align-center-24-mask { + @extend %with-mask, %align-center-24-svg-prop; + -webkit-mask-image: var(--align-center-24-svg); + mask-image: var(--align-center-24-svg); +} + +%with-align-justify-16-icon { + @extend %with-icon, %align-justify-16-svg-prop; + background-image: var(--align-justify-16-svg); +} +%with-align-justify-16-mask { + @extend %with-mask, %align-justify-16-svg-prop; + -webkit-mask-image: var(--align-justify-16-svg); + mask-image: var(--align-justify-16-svg); +} + +%with-align-justify-24-icon { + @extend %with-icon, %align-justify-24-svg-prop; + background-image: var(--align-justify-24-svg); +} +%with-align-justify-24-mask { + @extend %with-mask, %align-justify-24-svg-prop; + -webkit-mask-image: var(--align-justify-24-svg); + mask-image: var(--align-justify-24-svg); +} + +%with-align-left-16-icon { + @extend %with-icon, %align-left-16-svg-prop; + background-image: var(--align-left-16-svg); +} +%with-align-left-16-mask { + @extend %with-mask, %align-left-16-svg-prop; + -webkit-mask-image: var(--align-left-16-svg); + mask-image: var(--align-left-16-svg); +} + +%with-align-left-24-icon { + @extend %with-icon, %align-left-24-svg-prop; + background-image: var(--align-left-24-svg); +} +%with-align-left-24-mask { + @extend %with-mask, %align-left-24-svg-prop; + -webkit-mask-image: var(--align-left-24-svg); + mask-image: var(--align-left-24-svg); +} + +%with-align-right-16-icon { + @extend %with-icon, %align-right-16-svg-prop; + background-image: var(--align-right-16-svg); +} +%with-align-right-16-mask { + @extend %with-mask, %align-right-16-svg-prop; + -webkit-mask-image: var(--align-right-16-svg); + mask-image: var(--align-right-16-svg); +} + +%with-align-right-24-icon { + @extend %with-icon, %align-right-24-svg-prop; + background-image: var(--align-right-24-svg); +} +%with-align-right-24-mask { + @extend %with-mask, %align-right-24-svg-prop; + -webkit-mask-image: var(--align-right-24-svg); + mask-image: var(--align-right-24-svg); +} + +%with-apple-16-icon { + @extend %with-icon, %apple-16-svg-prop; + background-image: var(--apple-16-svg); +} +%with-apple-16-mask { + @extend %with-mask, %apple-16-svg-prop; + -webkit-mask-image: var(--apple-16-svg); + mask-image: var(--apple-16-svg); +} + +%with-apple-24-icon { + @extend %with-icon, %apple-24-svg-prop; + background-image: var(--apple-24-svg); +} +%with-apple-24-mask { + @extend %with-mask, %apple-24-svg-prop; + -webkit-mask-image: var(--apple-24-svg); + mask-image: var(--apple-24-svg); +} + +%with-apple-color-16-icon { + @extend %with-icon, %apple-color-16-svg-prop; + background-image: var(--apple-color-16-svg); +} +%with-apple-color-16-mask { + @extend %with-mask, %apple-color-16-svg-prop; + -webkit-mask-image: var(--apple-color-16-svg); + mask-image: var(--apple-color-16-svg); +} + +%with-apple-color-24-icon { + @extend %with-icon, %apple-color-24-svg-prop; + background-image: var(--apple-color-24-svg); +} +%with-apple-color-24-mask { + @extend %with-mask, %apple-color-24-svg-prop; + -webkit-mask-image: var(--apple-color-24-svg); + mask-image: var(--apple-color-24-svg); +} + +%with-archive-16-icon { + @extend %with-icon, %archive-16-svg-prop; + background-image: var(--archive-16-svg); +} +%with-archive-16-mask { + @extend %with-mask, %archive-16-svg-prop; + -webkit-mask-image: var(--archive-16-svg); + mask-image: var(--archive-16-svg); +} + +%with-archive-24-icon { + @extend %with-icon, %archive-24-svg-prop; + background-image: var(--archive-24-svg); +} +%with-archive-24-mask { + @extend %with-mask, %archive-24-svg-prop; + -webkit-mask-image: var(--archive-24-svg); + mask-image: var(--archive-24-svg); +} + +%with-arrow-down-16-icon { + @extend %with-icon, %arrow-down-16-svg-prop; + background-image: var(--arrow-down-16-svg); +} +%with-arrow-down-16-mask { + @extend %with-mask, %arrow-down-16-svg-prop; + -webkit-mask-image: var(--arrow-down-16-svg); + mask-image: var(--arrow-down-16-svg); +} + +%with-arrow-down-24-icon { + @extend %with-icon, %arrow-down-24-svg-prop; + background-image: var(--arrow-down-24-svg); +} +%with-arrow-down-24-mask { + @extend %with-mask, %arrow-down-24-svg-prop; + -webkit-mask-image: var(--arrow-down-24-svg); + mask-image: var(--arrow-down-24-svg); +} + +%with-arrow-down-circle-16-icon { + @extend %with-icon, %arrow-down-circle-16-svg-prop; + background-image: var(--arrow-down-circle-16-svg); +} +%with-arrow-down-circle-16-mask { + @extend %with-mask, %arrow-down-circle-16-svg-prop; + -webkit-mask-image: var(--arrow-down-circle-16-svg); + mask-image: var(--arrow-down-circle-16-svg); +} + +%with-arrow-down-circle-24-icon { + @extend %with-icon, %arrow-down-circle-24-svg-prop; + background-image: var(--arrow-down-circle-24-svg); +} +%with-arrow-down-circle-24-mask { + @extend %with-mask, %arrow-down-circle-24-svg-prop; + -webkit-mask-image: var(--arrow-down-circle-24-svg); + mask-image: var(--arrow-down-circle-24-svg); +} + +%with-arrow-down-left-16-icon { + @extend %with-icon, %arrow-down-left-16-svg-prop; + background-image: var(--arrow-down-left-16-svg); +} +%with-arrow-down-left-16-mask { + @extend %with-mask, %arrow-down-left-16-svg-prop; + -webkit-mask-image: var(--arrow-down-left-16-svg); + mask-image: var(--arrow-down-left-16-svg); +} + +%with-arrow-down-left-24-icon { + @extend %with-icon, %arrow-down-left-24-svg-prop; + background-image: var(--arrow-down-left-24-svg); +} +%with-arrow-down-left-24-mask { + @extend %with-mask, %arrow-down-left-24-svg-prop; + -webkit-mask-image: var(--arrow-down-left-24-svg); + mask-image: var(--arrow-down-left-24-svg); +} + +%with-arrow-down-right-16-icon { + @extend %with-icon, %arrow-down-right-16-svg-prop; + background-image: var(--arrow-down-right-16-svg); +} +%with-arrow-down-right-16-mask { + @extend %with-mask, %arrow-down-right-16-svg-prop; + -webkit-mask-image: var(--arrow-down-right-16-svg); + mask-image: var(--arrow-down-right-16-svg); +} + +%with-arrow-down-right-24-icon { + @extend %with-icon, %arrow-down-right-24-svg-prop; + background-image: var(--arrow-down-right-24-svg); +} +%with-arrow-down-right-24-mask { + @extend %with-mask, %arrow-down-right-24-svg-prop; + -webkit-mask-image: var(--arrow-down-right-24-svg); + mask-image: var(--arrow-down-right-24-svg); +} + %with-arrow-down-icon { @extend %with-icon, %arrow-down-svg-prop; background-image: var(--arrow-down-svg); @@ -38,6 +438,46 @@ mask-image: var(--arrow-down-svg); } +%with-arrow-left-16-icon { + @extend %with-icon, %arrow-left-16-svg-prop; + background-image: var(--arrow-left-16-svg); +} +%with-arrow-left-16-mask { + @extend %with-mask, %arrow-left-16-svg-prop; + -webkit-mask-image: var(--arrow-left-16-svg); + mask-image: var(--arrow-left-16-svg); +} + +%with-arrow-left-24-icon { + @extend %with-icon, %arrow-left-24-svg-prop; + background-image: var(--arrow-left-24-svg); +} +%with-arrow-left-24-mask { + @extend %with-mask, %arrow-left-24-svg-prop; + -webkit-mask-image: var(--arrow-left-24-svg); + mask-image: var(--arrow-left-24-svg); +} + +%with-arrow-left-circle-16-icon { + @extend %with-icon, %arrow-left-circle-16-svg-prop; + background-image: var(--arrow-left-circle-16-svg); +} +%with-arrow-left-circle-16-mask { + @extend %with-mask, %arrow-left-circle-16-svg-prop; + -webkit-mask-image: var(--arrow-left-circle-16-svg); + mask-image: var(--arrow-left-circle-16-svg); +} + +%with-arrow-left-circle-24-icon { + @extend %with-icon, %arrow-left-circle-24-svg-prop; + background-image: var(--arrow-left-circle-24-svg); +} +%with-arrow-left-circle-24-mask { + @extend %with-mask, %arrow-left-circle-24-svg-prop; + -webkit-mask-image: var(--arrow-left-circle-24-svg); + mask-image: var(--arrow-left-circle-24-svg); +} + %with-arrow-left-icon { @extend %with-icon, %arrow-left-svg-prop; background-image: var(--arrow-left-svg); @@ -48,6 +488,46 @@ mask-image: var(--arrow-left-svg); } +%with-arrow-right-16-icon { + @extend %with-icon, %arrow-right-16-svg-prop; + background-image: var(--arrow-right-16-svg); +} +%with-arrow-right-16-mask { + @extend %with-mask, %arrow-right-16-svg-prop; + -webkit-mask-image: var(--arrow-right-16-svg); + mask-image: var(--arrow-right-16-svg); +} + +%with-arrow-right-24-icon { + @extend %with-icon, %arrow-right-24-svg-prop; + background-image: var(--arrow-right-24-svg); +} +%with-arrow-right-24-mask { + @extend %with-mask, %arrow-right-24-svg-prop; + -webkit-mask-image: var(--arrow-right-24-svg); + mask-image: var(--arrow-right-24-svg); +} + +%with-arrow-right-circle-16-icon { + @extend %with-icon, %arrow-right-circle-16-svg-prop; + background-image: var(--arrow-right-circle-16-svg); +} +%with-arrow-right-circle-16-mask { + @extend %with-mask, %arrow-right-circle-16-svg-prop; + -webkit-mask-image: var(--arrow-right-circle-16-svg); + mask-image: var(--arrow-right-circle-16-svg); +} + +%with-arrow-right-circle-24-icon { + @extend %with-icon, %arrow-right-circle-24-svg-prop; + background-image: var(--arrow-right-circle-24-svg); +} +%with-arrow-right-circle-24-mask { + @extend %with-mask, %arrow-right-circle-24-svg-prop; + -webkit-mask-image: var(--arrow-right-circle-24-svg); + mask-image: var(--arrow-right-circle-24-svg); +} + %with-arrow-right-icon { @extend %with-icon, %arrow-right-svg-prop; background-image: var(--arrow-right-svg); @@ -58,6 +538,86 @@ mask-image: var(--arrow-right-svg); } +%with-arrow-up-16-icon { + @extend %with-icon, %arrow-up-16-svg-prop; + background-image: var(--arrow-up-16-svg); +} +%with-arrow-up-16-mask { + @extend %with-mask, %arrow-up-16-svg-prop; + -webkit-mask-image: var(--arrow-up-16-svg); + mask-image: var(--arrow-up-16-svg); +} + +%with-arrow-up-24-icon { + @extend %with-icon, %arrow-up-24-svg-prop; + background-image: var(--arrow-up-24-svg); +} +%with-arrow-up-24-mask { + @extend %with-mask, %arrow-up-24-svg-prop; + -webkit-mask-image: var(--arrow-up-24-svg); + mask-image: var(--arrow-up-24-svg); +} + +%with-arrow-up-circle-16-icon { + @extend %with-icon, %arrow-up-circle-16-svg-prop; + background-image: var(--arrow-up-circle-16-svg); +} +%with-arrow-up-circle-16-mask { + @extend %with-mask, %arrow-up-circle-16-svg-prop; + -webkit-mask-image: var(--arrow-up-circle-16-svg); + mask-image: var(--arrow-up-circle-16-svg); +} + +%with-arrow-up-circle-24-icon { + @extend %with-icon, %arrow-up-circle-24-svg-prop; + background-image: var(--arrow-up-circle-24-svg); +} +%with-arrow-up-circle-24-mask { + @extend %with-mask, %arrow-up-circle-24-svg-prop; + -webkit-mask-image: var(--arrow-up-circle-24-svg); + mask-image: var(--arrow-up-circle-24-svg); +} + +%with-arrow-up-left-16-icon { + @extend %with-icon, %arrow-up-left-16-svg-prop; + background-image: var(--arrow-up-left-16-svg); +} +%with-arrow-up-left-16-mask { + @extend %with-mask, %arrow-up-left-16-svg-prop; + -webkit-mask-image: var(--arrow-up-left-16-svg); + mask-image: var(--arrow-up-left-16-svg); +} + +%with-arrow-up-left-24-icon { + @extend %with-icon, %arrow-up-left-24-svg-prop; + background-image: var(--arrow-up-left-24-svg); +} +%with-arrow-up-left-24-mask { + @extend %with-mask, %arrow-up-left-24-svg-prop; + -webkit-mask-image: var(--arrow-up-left-24-svg); + mask-image: var(--arrow-up-left-24-svg); +} + +%with-arrow-up-right-16-icon { + @extend %with-icon, %arrow-up-right-16-svg-prop; + background-image: var(--arrow-up-right-16-svg); +} +%with-arrow-up-right-16-mask { + @extend %with-mask, %arrow-up-right-16-svg-prop; + -webkit-mask-image: var(--arrow-up-right-16-svg); + mask-image: var(--arrow-up-right-16-svg); +} + +%with-arrow-up-right-24-icon { + @extend %with-icon, %arrow-up-right-24-svg-prop; + background-image: var(--arrow-up-right-24-svg); +} +%with-arrow-up-right-24-mask { + @extend %with-mask, %arrow-up-right-24-svg-prop; + -webkit-mask-image: var(--arrow-up-right-24-svg); + mask-image: var(--arrow-up-right-24-svg); +} + %with-arrow-up-icon { @extend %with-icon, %arrow-up-svg-prop; background-image: var(--arrow-up-svg); @@ -68,6 +628,446 @@ mask-image: var(--arrow-up-svg); } +%with-at-sign-16-icon { + @extend %with-icon, %at-sign-16-svg-prop; + background-image: var(--at-sign-16-svg); +} +%with-at-sign-16-mask { + @extend %with-mask, %at-sign-16-svg-prop; + -webkit-mask-image: var(--at-sign-16-svg); + mask-image: var(--at-sign-16-svg); +} + +%with-at-sign-24-icon { + @extend %with-icon, %at-sign-24-svg-prop; + background-image: var(--at-sign-24-svg); +} +%with-at-sign-24-mask { + @extend %with-mask, %at-sign-24-svg-prop; + -webkit-mask-image: var(--at-sign-24-svg); + mask-image: var(--at-sign-24-svg); +} + +%with-auth0-16-icon { + @extend %with-icon, %auth0-16-svg-prop; + background-image: var(--auth0-16-svg); +} +%with-auth0-16-mask { + @extend %with-mask, %auth0-16-svg-prop; + -webkit-mask-image: var(--auth0-16-svg); + mask-image: var(--auth0-16-svg); +} + +%with-auth0-24-icon { + @extend %with-icon, %auth0-24-svg-prop; + background-image: var(--auth0-24-svg); +} +%with-auth0-24-mask { + @extend %with-mask, %auth0-24-svg-prop; + -webkit-mask-image: var(--auth0-24-svg); + mask-image: var(--auth0-24-svg); +} + +%with-auth0-color-16-icon { + @extend %with-icon, %auth0-color-16-svg-prop; + background-image: var(--auth0-color-16-svg); +} +%with-auth0-color-16-mask { + @extend %with-mask, %auth0-color-16-svg-prop; + -webkit-mask-image: var(--auth0-color-16-svg); + mask-image: var(--auth0-color-16-svg); +} + +%with-auth0-color-24-icon { + @extend %with-icon, %auth0-color-24-svg-prop; + background-image: var(--auth0-color-24-svg); +} +%with-auth0-color-24-mask { + @extend %with-mask, %auth0-color-24-svg-prop; + -webkit-mask-image: var(--auth0-color-24-svg); + mask-image: var(--auth0-color-24-svg); +} + +%with-auto-apply-16-icon { + @extend %with-icon, %auto-apply-16-svg-prop; + background-image: var(--auto-apply-16-svg); +} +%with-auto-apply-16-mask { + @extend %with-mask, %auto-apply-16-svg-prop; + -webkit-mask-image: var(--auto-apply-16-svg); + mask-image: var(--auto-apply-16-svg); +} + +%with-auto-apply-24-icon { + @extend %with-icon, %auto-apply-24-svg-prop; + background-image: var(--auto-apply-24-svg); +} +%with-auto-apply-24-mask { + @extend %with-mask, %auto-apply-24-svg-prop; + -webkit-mask-image: var(--auto-apply-24-svg); + mask-image: var(--auto-apply-24-svg); +} + +%with-award-16-icon { + @extend %with-icon, %award-16-svg-prop; + background-image: var(--award-16-svg); +} +%with-award-16-mask { + @extend %with-mask, %award-16-svg-prop; + -webkit-mask-image: var(--award-16-svg); + mask-image: var(--award-16-svg); +} + +%with-award-24-icon { + @extend %with-icon, %award-24-svg-prop; + background-image: var(--award-24-svg); +} +%with-award-24-mask { + @extend %with-mask, %award-24-svg-prop; + -webkit-mask-image: var(--award-24-svg); + mask-image: var(--award-24-svg); +} + +%with-aws-16-icon { + @extend %with-icon, %aws-16-svg-prop; + background-image: var(--aws-16-svg); +} +%with-aws-16-mask { + @extend %with-mask, %aws-16-svg-prop; + -webkit-mask-image: var(--aws-16-svg); + mask-image: var(--aws-16-svg); +} + +%with-aws-24-icon { + @extend %with-icon, %aws-24-svg-prop; + background-image: var(--aws-24-svg); +} +%with-aws-24-mask { + @extend %with-mask, %aws-24-svg-prop; + -webkit-mask-image: var(--aws-24-svg); + mask-image: var(--aws-24-svg); +} + +%with-aws-color-16-icon { + @extend %with-icon, %aws-color-16-svg-prop; + background-image: var(--aws-color-16-svg); +} +%with-aws-color-16-mask { + @extend %with-mask, %aws-color-16-svg-prop; + -webkit-mask-image: var(--aws-color-16-svg); + mask-image: var(--aws-color-16-svg); +} + +%with-aws-color-24-icon { + @extend %with-icon, %aws-color-24-svg-prop; + background-image: var(--aws-color-24-svg); +} +%with-aws-color-24-mask { + @extend %with-mask, %aws-color-24-svg-prop; + -webkit-mask-image: var(--aws-color-24-svg); + mask-image: var(--aws-color-24-svg); +} + +%with-azure-16-icon { + @extend %with-icon, %azure-16-svg-prop; + background-image: var(--azure-16-svg); +} +%with-azure-16-mask { + @extend %with-mask, %azure-16-svg-prop; + -webkit-mask-image: var(--azure-16-svg); + mask-image: var(--azure-16-svg); +} + +%with-azure-24-icon { + @extend %with-icon, %azure-24-svg-prop; + background-image: var(--azure-24-svg); +} +%with-azure-24-mask { + @extend %with-mask, %azure-24-svg-prop; + -webkit-mask-image: var(--azure-24-svg); + mask-image: var(--azure-24-svg); +} + +%with-azure-color-16-icon { + @extend %with-icon, %azure-color-16-svg-prop; + background-image: var(--azure-color-16-svg); +} +%with-azure-color-16-mask { + @extend %with-mask, %azure-color-16-svg-prop; + -webkit-mask-image: var(--azure-color-16-svg); + mask-image: var(--azure-color-16-svg); +} + +%with-azure-color-24-icon { + @extend %with-icon, %azure-color-24-svg-prop; + background-image: var(--azure-color-24-svg); +} +%with-azure-color-24-mask { + @extend %with-mask, %azure-color-24-svg-prop; + -webkit-mask-image: var(--azure-color-24-svg); + mask-image: var(--azure-color-24-svg); +} + +%with-azure-devops-16-icon { + @extend %with-icon, %azure-devops-16-svg-prop; + background-image: var(--azure-devops-16-svg); +} +%with-azure-devops-16-mask { + @extend %with-mask, %azure-devops-16-svg-prop; + -webkit-mask-image: var(--azure-devops-16-svg); + mask-image: var(--azure-devops-16-svg); +} + +%with-azure-devops-24-icon { + @extend %with-icon, %azure-devops-24-svg-prop; + background-image: var(--azure-devops-24-svg); +} +%with-azure-devops-24-mask { + @extend %with-mask, %azure-devops-24-svg-prop; + -webkit-mask-image: var(--azure-devops-24-svg); + mask-image: var(--azure-devops-24-svg); +} + +%with-azure-devops-color-16-icon { + @extend %with-icon, %azure-devops-color-16-svg-prop; + background-image: var(--azure-devops-color-16-svg); +} +%with-azure-devops-color-16-mask { + @extend %with-mask, %azure-devops-color-16-svg-prop; + -webkit-mask-image: var(--azure-devops-color-16-svg); + mask-image: var(--azure-devops-color-16-svg); +} + +%with-azure-devops-color-24-icon { + @extend %with-icon, %azure-devops-color-24-svg-prop; + background-image: var(--azure-devops-color-24-svg); +} +%with-azure-devops-color-24-mask { + @extend %with-mask, %azure-devops-color-24-svg-prop; + -webkit-mask-image: var(--azure-devops-color-24-svg); + mask-image: var(--azure-devops-color-24-svg); +} + +%with-bar-chart-16-icon { + @extend %with-icon, %bar-chart-16-svg-prop; + background-image: var(--bar-chart-16-svg); +} +%with-bar-chart-16-mask { + @extend %with-mask, %bar-chart-16-svg-prop; + -webkit-mask-image: var(--bar-chart-16-svg); + mask-image: var(--bar-chart-16-svg); +} + +%with-bar-chart-24-icon { + @extend %with-icon, %bar-chart-24-svg-prop; + background-image: var(--bar-chart-24-svg); +} +%with-bar-chart-24-mask { + @extend %with-mask, %bar-chart-24-svg-prop; + -webkit-mask-image: var(--bar-chart-24-svg); + mask-image: var(--bar-chart-24-svg); +} + +%with-bar-chart-alt-16-icon { + @extend %with-icon, %bar-chart-alt-16-svg-prop; + background-image: var(--bar-chart-alt-16-svg); +} +%with-bar-chart-alt-16-mask { + @extend %with-mask, %bar-chart-alt-16-svg-prop; + -webkit-mask-image: var(--bar-chart-alt-16-svg); + mask-image: var(--bar-chart-alt-16-svg); +} + +%with-bar-chart-alt-24-icon { + @extend %with-icon, %bar-chart-alt-24-svg-prop; + background-image: var(--bar-chart-alt-24-svg); +} +%with-bar-chart-alt-24-mask { + @extend %with-mask, %bar-chart-alt-24-svg-prop; + -webkit-mask-image: var(--bar-chart-alt-24-svg); + mask-image: var(--bar-chart-alt-24-svg); +} + +%with-battery-16-icon { + @extend %with-icon, %battery-16-svg-prop; + background-image: var(--battery-16-svg); +} +%with-battery-16-mask { + @extend %with-mask, %battery-16-svg-prop; + -webkit-mask-image: var(--battery-16-svg); + mask-image: var(--battery-16-svg); +} + +%with-battery-24-icon { + @extend %with-icon, %battery-24-svg-prop; + background-image: var(--battery-24-svg); +} +%with-battery-24-mask { + @extend %with-mask, %battery-24-svg-prop; + -webkit-mask-image: var(--battery-24-svg); + mask-image: var(--battery-24-svg); +} + +%with-battery-charging-16-icon { + @extend %with-icon, %battery-charging-16-svg-prop; + background-image: var(--battery-charging-16-svg); +} +%with-battery-charging-16-mask { + @extend %with-mask, %battery-charging-16-svg-prop; + -webkit-mask-image: var(--battery-charging-16-svg); + mask-image: var(--battery-charging-16-svg); +} + +%with-battery-charging-24-icon { + @extend %with-icon, %battery-charging-24-svg-prop; + background-image: var(--battery-charging-24-svg); +} +%with-battery-charging-24-mask { + @extend %with-mask, %battery-charging-24-svg-prop; + -webkit-mask-image: var(--battery-charging-24-svg); + mask-image: var(--battery-charging-24-svg); +} + +%with-beaker-16-icon { + @extend %with-icon, %beaker-16-svg-prop; + background-image: var(--beaker-16-svg); +} +%with-beaker-16-mask { + @extend %with-mask, %beaker-16-svg-prop; + -webkit-mask-image: var(--beaker-16-svg); + mask-image: var(--beaker-16-svg); +} + +%with-beaker-24-icon { + @extend %with-icon, %beaker-24-svg-prop; + background-image: var(--beaker-24-svg); +} +%with-beaker-24-mask { + @extend %with-mask, %beaker-24-svg-prop; + -webkit-mask-image: var(--beaker-24-svg); + mask-image: var(--beaker-24-svg); +} + +%with-bell-16-icon { + @extend %with-icon, %bell-16-svg-prop; + background-image: var(--bell-16-svg); +} +%with-bell-16-mask { + @extend %with-mask, %bell-16-svg-prop; + -webkit-mask-image: var(--bell-16-svg); + mask-image: var(--bell-16-svg); +} + +%with-bell-24-icon { + @extend %with-icon, %bell-24-svg-prop; + background-image: var(--bell-24-svg); +} +%with-bell-24-mask { + @extend %with-mask, %bell-24-svg-prop; + -webkit-mask-image: var(--bell-24-svg); + mask-image: var(--bell-24-svg); +} + +%with-bell-active-16-icon { + @extend %with-icon, %bell-active-16-svg-prop; + background-image: var(--bell-active-16-svg); +} +%with-bell-active-16-mask { + @extend %with-mask, %bell-active-16-svg-prop; + -webkit-mask-image: var(--bell-active-16-svg); + mask-image: var(--bell-active-16-svg); +} + +%with-bell-active-24-icon { + @extend %with-icon, %bell-active-24-svg-prop; + background-image: var(--bell-active-24-svg); +} +%with-bell-active-24-mask { + @extend %with-mask, %bell-active-24-svg-prop; + -webkit-mask-image: var(--bell-active-24-svg); + mask-image: var(--bell-active-24-svg); +} + +%with-bell-active-fill-16-icon { + @extend %with-icon, %bell-active-fill-16-svg-prop; + background-image: var(--bell-active-fill-16-svg); +} +%with-bell-active-fill-16-mask { + @extend %with-mask, %bell-active-fill-16-svg-prop; + -webkit-mask-image: var(--bell-active-fill-16-svg); + mask-image: var(--bell-active-fill-16-svg); +} + +%with-bell-active-fill-24-icon { + @extend %with-icon, %bell-active-fill-24-svg-prop; + background-image: var(--bell-active-fill-24-svg); +} +%with-bell-active-fill-24-mask { + @extend %with-mask, %bell-active-fill-24-svg-prop; + -webkit-mask-image: var(--bell-active-fill-24-svg); + mask-image: var(--bell-active-fill-24-svg); +} + +%with-bell-off-16-icon { + @extend %with-icon, %bell-off-16-svg-prop; + background-image: var(--bell-off-16-svg); +} +%with-bell-off-16-mask { + @extend %with-mask, %bell-off-16-svg-prop; + -webkit-mask-image: var(--bell-off-16-svg); + mask-image: var(--bell-off-16-svg); +} + +%with-bell-off-24-icon { + @extend %with-icon, %bell-off-24-svg-prop; + background-image: var(--bell-off-24-svg); +} +%with-bell-off-24-mask { + @extend %with-mask, %bell-off-24-svg-prop; + -webkit-mask-image: var(--bell-off-24-svg); + mask-image: var(--bell-off-24-svg); +} + +%with-bitbucket-16-icon { + @extend %with-icon, %bitbucket-16-svg-prop; + background-image: var(--bitbucket-16-svg); +} +%with-bitbucket-16-mask { + @extend %with-mask, %bitbucket-16-svg-prop; + -webkit-mask-image: var(--bitbucket-16-svg); + mask-image: var(--bitbucket-16-svg); +} + +%with-bitbucket-24-icon { + @extend %with-icon, %bitbucket-24-svg-prop; + background-image: var(--bitbucket-24-svg); +} +%with-bitbucket-24-mask { + @extend %with-mask, %bitbucket-24-svg-prop; + -webkit-mask-image: var(--bitbucket-24-svg); + mask-image: var(--bitbucket-24-svg); +} + +%with-bitbucket-color-16-icon { + @extend %with-icon, %bitbucket-color-16-svg-prop; + background-image: var(--bitbucket-color-16-svg); +} +%with-bitbucket-color-16-mask { + @extend %with-mask, %bitbucket-color-16-svg-prop; + -webkit-mask-image: var(--bitbucket-color-16-svg); + mask-image: var(--bitbucket-color-16-svg); +} + +%with-bitbucket-color-24-icon { + @extend %with-icon, %bitbucket-color-24-svg-prop; + background-image: var(--bitbucket-color-24-svg); +} +%with-bitbucket-color-24-mask { + @extend %with-mask, %bitbucket-color-24-svg-prop; + -webkit-mask-image: var(--bitbucket-color-24-svg); + mask-image: var(--bitbucket-color-24-svg); +} + %with-bolt-icon { @extend %with-icon, %bolt-svg-prop; background-image: var(--bolt-svg); @@ -78,6 +1078,166 @@ mask-image: var(--bolt-svg); } +%with-bookmark-16-icon { + @extend %with-icon, %bookmark-16-svg-prop; + background-image: var(--bookmark-16-svg); +} +%with-bookmark-16-mask { + @extend %with-mask, %bookmark-16-svg-prop; + -webkit-mask-image: var(--bookmark-16-svg); + mask-image: var(--bookmark-16-svg); +} + +%with-bookmark-24-icon { + @extend %with-icon, %bookmark-24-svg-prop; + background-image: var(--bookmark-24-svg); +} +%with-bookmark-24-mask { + @extend %with-mask, %bookmark-24-svg-prop; + -webkit-mask-image: var(--bookmark-24-svg); + mask-image: var(--bookmark-24-svg); +} + +%with-bookmark-add-16-icon { + @extend %with-icon, %bookmark-add-16-svg-prop; + background-image: var(--bookmark-add-16-svg); +} +%with-bookmark-add-16-mask { + @extend %with-mask, %bookmark-add-16-svg-prop; + -webkit-mask-image: var(--bookmark-add-16-svg); + mask-image: var(--bookmark-add-16-svg); +} + +%with-bookmark-add-24-icon { + @extend %with-icon, %bookmark-add-24-svg-prop; + background-image: var(--bookmark-add-24-svg); +} +%with-bookmark-add-24-mask { + @extend %with-mask, %bookmark-add-24-svg-prop; + -webkit-mask-image: var(--bookmark-add-24-svg); + mask-image: var(--bookmark-add-24-svg); +} + +%with-bookmark-add-fill-16-icon { + @extend %with-icon, %bookmark-add-fill-16-svg-prop; + background-image: var(--bookmark-add-fill-16-svg); +} +%with-bookmark-add-fill-16-mask { + @extend %with-mask, %bookmark-add-fill-16-svg-prop; + -webkit-mask-image: var(--bookmark-add-fill-16-svg); + mask-image: var(--bookmark-add-fill-16-svg); +} + +%with-bookmark-add-fill-24-icon { + @extend %with-icon, %bookmark-add-fill-24-svg-prop; + background-image: var(--bookmark-add-fill-24-svg); +} +%with-bookmark-add-fill-24-mask { + @extend %with-mask, %bookmark-add-fill-24-svg-prop; + -webkit-mask-image: var(--bookmark-add-fill-24-svg); + mask-image: var(--bookmark-add-fill-24-svg); +} + +%with-bookmark-fill-16-icon { + @extend %with-icon, %bookmark-fill-16-svg-prop; + background-image: var(--bookmark-fill-16-svg); +} +%with-bookmark-fill-16-mask { + @extend %with-mask, %bookmark-fill-16-svg-prop; + -webkit-mask-image: var(--bookmark-fill-16-svg); + mask-image: var(--bookmark-fill-16-svg); +} + +%with-bookmark-fill-24-icon { + @extend %with-icon, %bookmark-fill-24-svg-prop; + background-image: var(--bookmark-fill-24-svg); +} +%with-bookmark-fill-24-mask { + @extend %with-mask, %bookmark-fill-24-svg-prop; + -webkit-mask-image: var(--bookmark-fill-24-svg); + mask-image: var(--bookmark-fill-24-svg); +} + +%with-bookmark-remove-16-icon { + @extend %with-icon, %bookmark-remove-16-svg-prop; + background-image: var(--bookmark-remove-16-svg); +} +%with-bookmark-remove-16-mask { + @extend %with-mask, %bookmark-remove-16-svg-prop; + -webkit-mask-image: var(--bookmark-remove-16-svg); + mask-image: var(--bookmark-remove-16-svg); +} + +%with-bookmark-remove-24-icon { + @extend %with-icon, %bookmark-remove-24-svg-prop; + background-image: var(--bookmark-remove-24-svg); +} +%with-bookmark-remove-24-mask { + @extend %with-mask, %bookmark-remove-24-svg-prop; + -webkit-mask-image: var(--bookmark-remove-24-svg); + mask-image: var(--bookmark-remove-24-svg); +} + +%with-bookmark-remove-fill-16-icon { + @extend %with-icon, %bookmark-remove-fill-16-svg-prop; + background-image: var(--bookmark-remove-fill-16-svg); +} +%with-bookmark-remove-fill-16-mask { + @extend %with-mask, %bookmark-remove-fill-16-svg-prop; + -webkit-mask-image: var(--bookmark-remove-fill-16-svg); + mask-image: var(--bookmark-remove-fill-16-svg); +} + +%with-bookmark-remove-fill-24-icon { + @extend %with-icon, %bookmark-remove-fill-24-svg-prop; + background-image: var(--bookmark-remove-fill-24-svg); +} +%with-bookmark-remove-fill-24-mask { + @extend %with-mask, %bookmark-remove-fill-24-svg-prop; + -webkit-mask-image: var(--bookmark-remove-fill-24-svg); + mask-image: var(--bookmark-remove-fill-24-svg); +} + +%with-bottom-16-icon { + @extend %with-icon, %bottom-16-svg-prop; + background-image: var(--bottom-16-svg); +} +%with-bottom-16-mask { + @extend %with-mask, %bottom-16-svg-prop; + -webkit-mask-image: var(--bottom-16-svg); + mask-image: var(--bottom-16-svg); +} + +%with-bottom-24-icon { + @extend %with-icon, %bottom-24-svg-prop; + background-image: var(--bottom-24-svg); +} +%with-bottom-24-mask { + @extend %with-mask, %bottom-24-svg-prop; + -webkit-mask-image: var(--bottom-24-svg); + mask-image: var(--bottom-24-svg); +} + +%with-box-16-icon { + @extend %with-icon, %box-16-svg-prop; + background-image: var(--box-16-svg); +} +%with-box-16-mask { + @extend %with-mask, %box-16-svg-prop; + -webkit-mask-image: var(--box-16-svg); + mask-image: var(--box-16-svg); +} + +%with-box-24-icon { + @extend %with-icon, %box-24-svg-prop; + background-image: var(--box-24-svg); +} +%with-box-24-mask { + @extend %with-mask, %box-24-svg-prop; + -webkit-mask-image: var(--box-24-svg); + mask-image: var(--box-24-svg); +} + %with-box-check-fill-icon { @extend %with-icon, %box-check-fill-svg-prop; background-image: var(--box-check-fill-svg); @@ -98,6 +1258,26 @@ mask-image: var(--box-outline-svg); } +%with-briefcase-16-icon { + @extend %with-icon, %briefcase-16-svg-prop; + background-image: var(--briefcase-16-svg); +} +%with-briefcase-16-mask { + @extend %with-mask, %briefcase-16-svg-prop; + -webkit-mask-image: var(--briefcase-16-svg); + mask-image: var(--briefcase-16-svg); +} + +%with-briefcase-24-icon { + @extend %with-icon, %briefcase-24-svg-prop; + background-image: var(--briefcase-24-svg); +} +%with-briefcase-24-mask { + @extend %with-mask, %briefcase-24-svg-prop; + -webkit-mask-image: var(--briefcase-24-svg); + mask-image: var(--briefcase-24-svg); +} + %with-broadcast-icon { @extend %with-icon, %broadcast-svg-prop; background-image: var(--broadcast-svg); @@ -108,6 +1288,26 @@ mask-image: var(--broadcast-svg); } +%with-bug-16-icon { + @extend %with-icon, %bug-16-svg-prop; + background-image: var(--bug-16-svg); +} +%with-bug-16-mask { + @extend %with-mask, %bug-16-svg-prop; + -webkit-mask-image: var(--bug-16-svg); + mask-image: var(--bug-16-svg); +} + +%with-bug-24-icon { + @extend %with-icon, %bug-24-svg-prop; + background-image: var(--bug-24-svg); +} +%with-bug-24-mask { + @extend %with-mask, %bug-24-svg-prop; + -webkit-mask-image: var(--bug-24-svg); + mask-image: var(--bug-24-svg); +} + %with-bug-icon { @extend %with-icon, %bug-svg-prop; background-image: var(--bug-svg); @@ -118,6 +1318,46 @@ mask-image: var(--bug-svg); } +%with-build-16-icon { + @extend %with-icon, %build-16-svg-prop; + background-image: var(--build-16-svg); +} +%with-build-16-mask { + @extend %with-mask, %build-16-svg-prop; + -webkit-mask-image: var(--build-16-svg); + mask-image: var(--build-16-svg); +} + +%with-build-24-icon { + @extend %with-icon, %build-24-svg-prop; + background-image: var(--build-24-svg); +} +%with-build-24-mask { + @extend %with-mask, %build-24-svg-prop; + -webkit-mask-image: var(--build-24-svg); + mask-image: var(--build-24-svg); +} + +%with-calendar-16-icon { + @extend %with-icon, %calendar-16-svg-prop; + background-image: var(--calendar-16-svg); +} +%with-calendar-16-mask { + @extend %with-mask, %calendar-16-svg-prop; + -webkit-mask-image: var(--calendar-16-svg); + mask-image: var(--calendar-16-svg); +} + +%with-calendar-24-icon { + @extend %with-icon, %calendar-24-svg-prop; + background-image: var(--calendar-24-svg); +} +%with-calendar-24-mask { + @extend %with-mask, %calendar-24-svg-prop; + -webkit-mask-image: var(--calendar-24-svg); + mask-image: var(--calendar-24-svg); +} + %with-calendar-icon { @extend %with-icon, %calendar-svg-prop; background-image: var(--calendar-svg); @@ -128,6 +1368,46 @@ mask-image: var(--calendar-svg); } +%with-camera-16-icon { + @extend %with-icon, %camera-16-svg-prop; + background-image: var(--camera-16-svg); +} +%with-camera-16-mask { + @extend %with-mask, %camera-16-svg-prop; + -webkit-mask-image: var(--camera-16-svg); + mask-image: var(--camera-16-svg); +} + +%with-camera-24-icon { + @extend %with-icon, %camera-24-svg-prop; + background-image: var(--camera-24-svg); +} +%with-camera-24-mask { + @extend %with-mask, %camera-24-svg-prop; + -webkit-mask-image: var(--camera-24-svg); + mask-image: var(--camera-24-svg); +} + +%with-camera-off-16-icon { + @extend %with-icon, %camera-off-16-svg-prop; + background-image: var(--camera-off-16-svg); +} +%with-camera-off-16-mask { + @extend %with-mask, %camera-off-16-svg-prop; + -webkit-mask-image: var(--camera-off-16-svg); + mask-image: var(--camera-off-16-svg); +} + +%with-camera-off-24-icon { + @extend %with-icon, %camera-off-24-svg-prop; + background-image: var(--camera-off-24-svg); +} +%with-camera-off-24-mask { + @extend %with-mask, %camera-off-24-svg-prop; + -webkit-mask-image: var(--camera-off-24-svg); + mask-image: var(--camera-off-24-svg); +} + %with-cancel-circle-fill-icon { @extend %with-icon, %cancel-circle-fill-svg-prop; background-image: var(--cancel-circle-fill-svg); @@ -178,6 +1458,26 @@ mask-image: var(--cancel-square-outline-svg); } +%with-caret-16-icon { + @extend %with-icon, %caret-16-svg-prop; + background-image: var(--caret-16-svg); +} +%with-caret-16-mask { + @extend %with-mask, %caret-16-svg-prop; + -webkit-mask-image: var(--caret-16-svg); + mask-image: var(--caret-16-svg); +} + +%with-caret-24-icon { + @extend %with-icon, %caret-24-svg-prop; + background-image: var(--caret-24-svg); +} +%with-caret-24-mask { + @extend %with-mask, %caret-24-svg-prop; + -webkit-mask-image: var(--caret-24-svg); + mask-image: var(--caret-24-svg); +} + %with-caret-down-icon { @extend %with-icon, %caret-down-svg-prop; background-image: var(--caret-down-svg); @@ -198,6 +1498,166 @@ mask-image: var(--caret-up-svg); } +%with-cast-16-icon { + @extend %with-icon, %cast-16-svg-prop; + background-image: var(--cast-16-svg); +} +%with-cast-16-mask { + @extend %with-mask, %cast-16-svg-prop; + -webkit-mask-image: var(--cast-16-svg); + mask-image: var(--cast-16-svg); +} + +%with-cast-24-icon { + @extend %with-icon, %cast-24-svg-prop; + background-image: var(--cast-24-svg); +} +%with-cast-24-mask { + @extend %with-mask, %cast-24-svg-prop; + -webkit-mask-image: var(--cast-24-svg); + mask-image: var(--cast-24-svg); +} + +%with-certificate-16-icon { + @extend %with-icon, %certificate-16-svg-prop; + background-image: var(--certificate-16-svg); +} +%with-certificate-16-mask { + @extend %with-mask, %certificate-16-svg-prop; + -webkit-mask-image: var(--certificate-16-svg); + mask-image: var(--certificate-16-svg); +} + +%with-certificate-24-icon { + @extend %with-icon, %certificate-24-svg-prop; + background-image: var(--certificate-24-svg); +} +%with-certificate-24-mask { + @extend %with-mask, %certificate-24-svg-prop; + -webkit-mask-image: var(--certificate-24-svg); + mask-image: var(--certificate-24-svg); +} + +%with-change-16-icon { + @extend %with-icon, %change-16-svg-prop; + background-image: var(--change-16-svg); +} +%with-change-16-mask { + @extend %with-mask, %change-16-svg-prop; + -webkit-mask-image: var(--change-16-svg); + mask-image: var(--change-16-svg); +} + +%with-change-24-icon { + @extend %with-icon, %change-24-svg-prop; + background-image: var(--change-24-svg); +} +%with-change-24-mask { + @extend %with-mask, %change-24-svg-prop; + -webkit-mask-image: var(--change-24-svg); + mask-image: var(--change-24-svg); +} + +%with-change-circle-16-icon { + @extend %with-icon, %change-circle-16-svg-prop; + background-image: var(--change-circle-16-svg); +} +%with-change-circle-16-mask { + @extend %with-mask, %change-circle-16-svg-prop; + -webkit-mask-image: var(--change-circle-16-svg); + mask-image: var(--change-circle-16-svg); +} + +%with-change-circle-24-icon { + @extend %with-icon, %change-circle-24-svg-prop; + background-image: var(--change-circle-24-svg); +} +%with-change-circle-24-mask { + @extend %with-mask, %change-circle-24-svg-prop; + -webkit-mask-image: var(--change-circle-24-svg); + mask-image: var(--change-circle-24-svg); +} + +%with-change-square-16-icon { + @extend %with-icon, %change-square-16-svg-prop; + background-image: var(--change-square-16-svg); +} +%with-change-square-16-mask { + @extend %with-mask, %change-square-16-svg-prop; + -webkit-mask-image: var(--change-square-16-svg); + mask-image: var(--change-square-16-svg); +} + +%with-change-square-24-icon { + @extend %with-icon, %change-square-24-svg-prop; + background-image: var(--change-square-24-svg); +} +%with-change-square-24-mask { + @extend %with-mask, %change-square-24-svg-prop; + -webkit-mask-image: var(--change-square-24-svg); + mask-image: var(--change-square-24-svg); +} + +%with-check-16-icon { + @extend %with-icon, %check-16-svg-prop; + background-image: var(--check-16-svg); +} +%with-check-16-mask { + @extend %with-mask, %check-16-svg-prop; + -webkit-mask-image: var(--check-16-svg); + mask-image: var(--check-16-svg); +} + +%with-check-24-icon { + @extend %with-icon, %check-24-svg-prop; + background-image: var(--check-24-svg); +} +%with-check-24-mask { + @extend %with-mask, %check-24-svg-prop; + -webkit-mask-image: var(--check-24-svg); + mask-image: var(--check-24-svg); +} + +%with-check-circle-16-icon { + @extend %with-icon, %check-circle-16-svg-prop; + background-image: var(--check-circle-16-svg); +} +%with-check-circle-16-mask { + @extend %with-mask, %check-circle-16-svg-prop; + -webkit-mask-image: var(--check-circle-16-svg); + mask-image: var(--check-circle-16-svg); +} + +%with-check-circle-24-icon { + @extend %with-icon, %check-circle-24-svg-prop; + background-image: var(--check-circle-24-svg); +} +%with-check-circle-24-mask { + @extend %with-mask, %check-circle-24-svg-prop; + -webkit-mask-image: var(--check-circle-24-svg); + mask-image: var(--check-circle-24-svg); +} + +%with-check-circle-fill-16-icon { + @extend %with-icon, %check-circle-fill-16-svg-prop; + background-image: var(--check-circle-fill-16-svg); +} +%with-check-circle-fill-16-mask { + @extend %with-mask, %check-circle-fill-16-svg-prop; + -webkit-mask-image: var(--check-circle-fill-16-svg); + mask-image: var(--check-circle-fill-16-svg); +} + +%with-check-circle-fill-24-icon { + @extend %with-icon, %check-circle-fill-24-svg-prop; + background-image: var(--check-circle-fill-24-svg); +} +%with-check-circle-fill-24-mask { + @extend %with-mask, %check-circle-fill-24-svg-prop; + -webkit-mask-image: var(--check-circle-fill-24-svg); + mask-image: var(--check-circle-fill-24-svg); +} + %with-check-circle-fill-icon { @extend %with-icon, %check-circle-fill-svg-prop; background-image: var(--check-circle-fill-svg); @@ -218,6 +1678,86 @@ mask-image: var(--check-circle-outline-svg); } +%with-check-diamond-16-icon { + @extend %with-icon, %check-diamond-16-svg-prop; + background-image: var(--check-diamond-16-svg); +} +%with-check-diamond-16-mask { + @extend %with-mask, %check-diamond-16-svg-prop; + -webkit-mask-image: var(--check-diamond-16-svg); + mask-image: var(--check-diamond-16-svg); +} + +%with-check-diamond-24-icon { + @extend %with-icon, %check-diamond-24-svg-prop; + background-image: var(--check-diamond-24-svg); +} +%with-check-diamond-24-mask { + @extend %with-mask, %check-diamond-24-svg-prop; + -webkit-mask-image: var(--check-diamond-24-svg); + mask-image: var(--check-diamond-24-svg); +} + +%with-check-diamond-fill-16-icon { + @extend %with-icon, %check-diamond-fill-16-svg-prop; + background-image: var(--check-diamond-fill-16-svg); +} +%with-check-diamond-fill-16-mask { + @extend %with-mask, %check-diamond-fill-16-svg-prop; + -webkit-mask-image: var(--check-diamond-fill-16-svg); + mask-image: var(--check-diamond-fill-16-svg); +} + +%with-check-diamond-fill-24-icon { + @extend %with-icon, %check-diamond-fill-24-svg-prop; + background-image: var(--check-diamond-fill-24-svg); +} +%with-check-diamond-fill-24-mask { + @extend %with-mask, %check-diamond-fill-24-svg-prop; + -webkit-mask-image: var(--check-diamond-fill-24-svg); + mask-image: var(--check-diamond-fill-24-svg); +} + +%with-check-hexagon-16-icon { + @extend %with-icon, %check-hexagon-16-svg-prop; + background-image: var(--check-hexagon-16-svg); +} +%with-check-hexagon-16-mask { + @extend %with-mask, %check-hexagon-16-svg-prop; + -webkit-mask-image: var(--check-hexagon-16-svg); + mask-image: var(--check-hexagon-16-svg); +} + +%with-check-hexagon-24-icon { + @extend %with-icon, %check-hexagon-24-svg-prop; + background-image: var(--check-hexagon-24-svg); +} +%with-check-hexagon-24-mask { + @extend %with-mask, %check-hexagon-24-svg-prop; + -webkit-mask-image: var(--check-hexagon-24-svg); + mask-image: var(--check-hexagon-24-svg); +} + +%with-check-hexagon-fill-16-icon { + @extend %with-icon, %check-hexagon-fill-16-svg-prop; + background-image: var(--check-hexagon-fill-16-svg); +} +%with-check-hexagon-fill-16-mask { + @extend %with-mask, %check-hexagon-fill-16-svg-prop; + -webkit-mask-image: var(--check-hexagon-fill-16-svg); + mask-image: var(--check-hexagon-fill-16-svg); +} + +%with-check-hexagon-fill-24-icon { + @extend %with-icon, %check-hexagon-fill-24-svg-prop; + background-image: var(--check-hexagon-fill-24-svg); +} +%with-check-hexagon-fill-24-mask { + @extend %with-mask, %check-hexagon-fill-24-svg-prop; + -webkit-mask-image: var(--check-hexagon-fill-24-svg); + mask-image: var(--check-hexagon-fill-24-svg); +} + %with-check-plain-icon { @extend %with-icon, %check-plain-svg-prop; background-image: var(--check-plain-svg); @@ -228,6 +1768,66 @@ mask-image: var(--check-plain-svg); } +%with-check-square-16-icon { + @extend %with-icon, %check-square-16-svg-prop; + background-image: var(--check-square-16-svg); +} +%with-check-square-16-mask { + @extend %with-mask, %check-square-16-svg-prop; + -webkit-mask-image: var(--check-square-16-svg); + mask-image: var(--check-square-16-svg); +} + +%with-check-square-24-icon { + @extend %with-icon, %check-square-24-svg-prop; + background-image: var(--check-square-24-svg); +} +%with-check-square-24-mask { + @extend %with-mask, %check-square-24-svg-prop; + -webkit-mask-image: var(--check-square-24-svg); + mask-image: var(--check-square-24-svg); +} + +%with-check-square-fill-16-icon { + @extend %with-icon, %check-square-fill-16-svg-prop; + background-image: var(--check-square-fill-16-svg); +} +%with-check-square-fill-16-mask { + @extend %with-mask, %check-square-fill-16-svg-prop; + -webkit-mask-image: var(--check-square-fill-16-svg); + mask-image: var(--check-square-fill-16-svg); +} + +%with-check-square-fill-24-icon { + @extend %with-icon, %check-square-fill-24-svg-prop; + background-image: var(--check-square-fill-24-svg); +} +%with-check-square-fill-24-mask { + @extend %with-mask, %check-square-fill-24-svg-prop; + -webkit-mask-image: var(--check-square-fill-24-svg); + mask-image: var(--check-square-fill-24-svg); +} + +%with-chevron-down-16-icon { + @extend %with-icon, %chevron-down-16-svg-prop; + background-image: var(--chevron-down-16-svg); +} +%with-chevron-down-16-mask { + @extend %with-mask, %chevron-down-16-svg-prop; + -webkit-mask-image: var(--chevron-down-16-svg); + mask-image: var(--chevron-down-16-svg); +} + +%with-chevron-down-24-icon { + @extend %with-icon, %chevron-down-24-svg-prop; + background-image: var(--chevron-down-24-svg); +} +%with-chevron-down-24-mask { + @extend %with-mask, %chevron-down-24-svg-prop; + -webkit-mask-image: var(--chevron-down-24-svg); + mask-image: var(--chevron-down-24-svg); +} + %with-chevron-down-icon { @extend %with-icon, %chevron-down-svg-prop; background-image: var(--chevron-down-svg); @@ -238,6 +1838,26 @@ mask-image: var(--chevron-down-svg); } +%with-chevron-left-16-icon { + @extend %with-icon, %chevron-left-16-svg-prop; + background-image: var(--chevron-left-16-svg); +} +%with-chevron-left-16-mask { + @extend %with-mask, %chevron-left-16-svg-prop; + -webkit-mask-image: var(--chevron-left-16-svg); + mask-image: var(--chevron-left-16-svg); +} + +%with-chevron-left-24-icon { + @extend %with-icon, %chevron-left-24-svg-prop; + background-image: var(--chevron-left-24-svg); +} +%with-chevron-left-24-mask { + @extend %with-mask, %chevron-left-24-svg-prop; + -webkit-mask-image: var(--chevron-left-24-svg); + mask-image: var(--chevron-left-24-svg); +} + %with-chevron-left-icon { @extend %with-icon, %chevron-left-svg-prop; background-image: var(--chevron-left-svg); @@ -248,6 +1868,26 @@ mask-image: var(--chevron-left-svg); } +%with-chevron-right-16-icon { + @extend %with-icon, %chevron-right-16-svg-prop; + background-image: var(--chevron-right-16-svg); +} +%with-chevron-right-16-mask { + @extend %with-mask, %chevron-right-16-svg-prop; + -webkit-mask-image: var(--chevron-right-16-svg); + mask-image: var(--chevron-right-16-svg); +} + +%with-chevron-right-24-icon { + @extend %with-icon, %chevron-right-24-svg-prop; + background-image: var(--chevron-right-24-svg); +} +%with-chevron-right-24-mask { + @extend %with-mask, %chevron-right-24-svg-prop; + -webkit-mask-image: var(--chevron-right-24-svg); + mask-image: var(--chevron-right-24-svg); +} + %with-chevron-right-icon { @extend %with-icon, %chevron-right-svg-prop; background-image: var(--chevron-right-svg); @@ -258,6 +1898,26 @@ mask-image: var(--chevron-right-svg); } +%with-chevron-up-16-icon { + @extend %with-icon, %chevron-up-16-svg-prop; + background-image: var(--chevron-up-16-svg); +} +%with-chevron-up-16-mask { + @extend %with-mask, %chevron-up-16-svg-prop; + -webkit-mask-image: var(--chevron-up-16-svg); + mask-image: var(--chevron-up-16-svg); +} + +%with-chevron-up-24-icon { + @extend %with-icon, %chevron-up-24-svg-prop; + background-image: var(--chevron-up-24-svg); +} +%with-chevron-up-24-mask { + @extend %with-mask, %chevron-up-24-svg-prop; + -webkit-mask-image: var(--chevron-up-24-svg); + mask-image: var(--chevron-up-24-svg); +} + %with-chevron-up-icon { @extend %with-icon, %chevron-up-svg-prop; background-image: var(--chevron-up-svg); @@ -268,6 +1928,246 @@ mask-image: var(--chevron-up-svg); } +%with-chevrons-down-16-icon { + @extend %with-icon, %chevrons-down-16-svg-prop; + background-image: var(--chevrons-down-16-svg); +} +%with-chevrons-down-16-mask { + @extend %with-mask, %chevrons-down-16-svg-prop; + -webkit-mask-image: var(--chevrons-down-16-svg); + mask-image: var(--chevrons-down-16-svg); +} + +%with-chevrons-down-24-icon { + @extend %with-icon, %chevrons-down-24-svg-prop; + background-image: var(--chevrons-down-24-svg); +} +%with-chevrons-down-24-mask { + @extend %with-mask, %chevrons-down-24-svg-prop; + -webkit-mask-image: var(--chevrons-down-24-svg); + mask-image: var(--chevrons-down-24-svg); +} + +%with-chevrons-left-16-icon { + @extend %with-icon, %chevrons-left-16-svg-prop; + background-image: var(--chevrons-left-16-svg); +} +%with-chevrons-left-16-mask { + @extend %with-mask, %chevrons-left-16-svg-prop; + -webkit-mask-image: var(--chevrons-left-16-svg); + mask-image: var(--chevrons-left-16-svg); +} + +%with-chevrons-left-24-icon { + @extend %with-icon, %chevrons-left-24-svg-prop; + background-image: var(--chevrons-left-24-svg); +} +%with-chevrons-left-24-mask { + @extend %with-mask, %chevrons-left-24-svg-prop; + -webkit-mask-image: var(--chevrons-left-24-svg); + mask-image: var(--chevrons-left-24-svg); +} + +%with-chevrons-right-16-icon { + @extend %with-icon, %chevrons-right-16-svg-prop; + background-image: var(--chevrons-right-16-svg); +} +%with-chevrons-right-16-mask { + @extend %with-mask, %chevrons-right-16-svg-prop; + -webkit-mask-image: var(--chevrons-right-16-svg); + mask-image: var(--chevrons-right-16-svg); +} + +%with-chevrons-right-24-icon { + @extend %with-icon, %chevrons-right-24-svg-prop; + background-image: var(--chevrons-right-24-svg); +} +%with-chevrons-right-24-mask { + @extend %with-mask, %chevrons-right-24-svg-prop; + -webkit-mask-image: var(--chevrons-right-24-svg); + mask-image: var(--chevrons-right-24-svg); +} + +%with-chevrons-up-16-icon { + @extend %with-icon, %chevrons-up-16-svg-prop; + background-image: var(--chevrons-up-16-svg); +} +%with-chevrons-up-16-mask { + @extend %with-mask, %chevrons-up-16-svg-prop; + -webkit-mask-image: var(--chevrons-up-16-svg); + mask-image: var(--chevrons-up-16-svg); +} + +%with-chevrons-up-24-icon { + @extend %with-icon, %chevrons-up-24-svg-prop; + background-image: var(--chevrons-up-24-svg); +} +%with-chevrons-up-24-mask { + @extend %with-mask, %chevrons-up-24-svg-prop; + -webkit-mask-image: var(--chevrons-up-24-svg); + mask-image: var(--chevrons-up-24-svg); +} + +%with-circle-16-icon { + @extend %with-icon, %circle-16-svg-prop; + background-image: var(--circle-16-svg); +} +%with-circle-16-mask { + @extend %with-mask, %circle-16-svg-prop; + -webkit-mask-image: var(--circle-16-svg); + mask-image: var(--circle-16-svg); +} + +%with-circle-24-icon { + @extend %with-icon, %circle-24-svg-prop; + background-image: var(--circle-24-svg); +} +%with-circle-24-mask { + @extend %with-mask, %circle-24-svg-prop; + -webkit-mask-image: var(--circle-24-svg); + mask-image: var(--circle-24-svg); +} + +%with-circle-dot-16-icon { + @extend %with-icon, %circle-dot-16-svg-prop; + background-image: var(--circle-dot-16-svg); +} +%with-circle-dot-16-mask { + @extend %with-mask, %circle-dot-16-svg-prop; + -webkit-mask-image: var(--circle-dot-16-svg); + mask-image: var(--circle-dot-16-svg); +} + +%with-circle-dot-24-icon { + @extend %with-icon, %circle-dot-24-svg-prop; + background-image: var(--circle-dot-24-svg); +} +%with-circle-dot-24-mask { + @extend %with-mask, %circle-dot-24-svg-prop; + -webkit-mask-image: var(--circle-dot-24-svg); + mask-image: var(--circle-dot-24-svg); +} + +%with-circle-fill-16-icon { + @extend %with-icon, %circle-fill-16-svg-prop; + background-image: var(--circle-fill-16-svg); +} +%with-circle-fill-16-mask { + @extend %with-mask, %circle-fill-16-svg-prop; + -webkit-mask-image: var(--circle-fill-16-svg); + mask-image: var(--circle-fill-16-svg); +} + +%with-circle-fill-24-icon { + @extend %with-icon, %circle-fill-24-svg-prop; + background-image: var(--circle-fill-24-svg); +} +%with-circle-fill-24-mask { + @extend %with-mask, %circle-fill-24-svg-prop; + -webkit-mask-image: var(--circle-fill-24-svg); + mask-image: var(--circle-fill-24-svg); +} + +%with-circle-half-16-icon { + @extend %with-icon, %circle-half-16-svg-prop; + background-image: var(--circle-half-16-svg); +} +%with-circle-half-16-mask { + @extend %with-mask, %circle-half-16-svg-prop; + -webkit-mask-image: var(--circle-half-16-svg); + mask-image: var(--circle-half-16-svg); +} + +%with-circle-half-24-icon { + @extend %with-icon, %circle-half-24-svg-prop; + background-image: var(--circle-half-24-svg); +} +%with-circle-half-24-mask { + @extend %with-mask, %circle-half-24-svg-prop; + -webkit-mask-image: var(--circle-half-24-svg); + mask-image: var(--circle-half-24-svg); +} + +%with-clipboard-16-icon { + @extend %with-icon, %clipboard-16-svg-prop; + background-image: var(--clipboard-16-svg); +} +%with-clipboard-16-mask { + @extend %with-mask, %clipboard-16-svg-prop; + -webkit-mask-image: var(--clipboard-16-svg); + mask-image: var(--clipboard-16-svg); +} + +%with-clipboard-24-icon { + @extend %with-icon, %clipboard-24-svg-prop; + background-image: var(--clipboard-24-svg); +} +%with-clipboard-24-mask { + @extend %with-mask, %clipboard-24-svg-prop; + -webkit-mask-image: var(--clipboard-24-svg); + mask-image: var(--clipboard-24-svg); +} + +%with-clipboard-checked-16-icon { + @extend %with-icon, %clipboard-checked-16-svg-prop; + background-image: var(--clipboard-checked-16-svg); +} +%with-clipboard-checked-16-mask { + @extend %with-mask, %clipboard-checked-16-svg-prop; + -webkit-mask-image: var(--clipboard-checked-16-svg); + mask-image: var(--clipboard-checked-16-svg); +} + +%with-clipboard-checked-24-icon { + @extend %with-icon, %clipboard-checked-24-svg-prop; + background-image: var(--clipboard-checked-24-svg); +} +%with-clipboard-checked-24-mask { + @extend %with-mask, %clipboard-checked-24-svg-prop; + -webkit-mask-image: var(--clipboard-checked-24-svg); + mask-image: var(--clipboard-checked-24-svg); +} + +%with-clipboard-copy-16-icon { + @extend %with-icon, %clipboard-copy-16-svg-prop; + background-image: var(--clipboard-copy-16-svg); +} +%with-clipboard-copy-16-mask { + @extend %with-mask, %clipboard-copy-16-svg-prop; + -webkit-mask-image: var(--clipboard-copy-16-svg); + mask-image: var(--clipboard-copy-16-svg); +} + +%with-clipboard-copy-24-icon { + @extend %with-icon, %clipboard-copy-24-svg-prop; + background-image: var(--clipboard-copy-24-svg); +} +%with-clipboard-copy-24-mask { + @extend %with-mask, %clipboard-copy-24-svg-prop; + -webkit-mask-image: var(--clipboard-copy-24-svg); + mask-image: var(--clipboard-copy-24-svg); +} + +%with-clock-16-icon { + @extend %with-icon, %clock-16-svg-prop; + background-image: var(--clock-16-svg); +} +%with-clock-16-mask { + @extend %with-mask, %clock-16-svg-prop; + -webkit-mask-image: var(--clock-16-svg); + mask-image: var(--clock-16-svg); +} + +%with-clock-24-icon { + @extend %with-icon, %clock-24-svg-prop; + background-image: var(--clock-24-svg); +} +%with-clock-24-mask { + @extend %with-mask, %clock-24-svg-prop; + -webkit-mask-image: var(--clock-24-svg); + mask-image: var(--clock-24-svg); +} + %with-clock-fill-icon { @extend %with-icon, %clock-fill-svg-prop; background-image: var(--clock-fill-svg); @@ -288,6 +2188,46 @@ mask-image: var(--clock-outline-svg); } +%with-cloud-16-icon { + @extend %with-icon, %cloud-16-svg-prop; + background-image: var(--cloud-16-svg); +} +%with-cloud-16-mask { + @extend %with-mask, %cloud-16-svg-prop; + -webkit-mask-image: var(--cloud-16-svg); + mask-image: var(--cloud-16-svg); +} + +%with-cloud-24-icon { + @extend %with-icon, %cloud-24-svg-prop; + background-image: var(--cloud-24-svg); +} +%with-cloud-24-mask { + @extend %with-mask, %cloud-24-svg-prop; + -webkit-mask-image: var(--cloud-24-svg); + mask-image: var(--cloud-24-svg); +} + +%with-cloud-check-16-icon { + @extend %with-icon, %cloud-check-16-svg-prop; + background-image: var(--cloud-check-16-svg); +} +%with-cloud-check-16-mask { + @extend %with-mask, %cloud-check-16-svg-prop; + -webkit-mask-image: var(--cloud-check-16-svg); + mask-image: var(--cloud-check-16-svg); +} + +%with-cloud-check-24-icon { + @extend %with-icon, %cloud-check-24-svg-prop; + background-image: var(--cloud-check-24-svg); +} +%with-cloud-check-24-mask { + @extend %with-mask, %cloud-check-24-svg-prop; + -webkit-mask-image: var(--cloud-check-24-svg); + mask-image: var(--cloud-check-24-svg); +} + %with-cloud-cross-icon { @extend %with-icon, %cloud-cross-svg-prop; background-image: var(--cloud-cross-svg); @@ -298,6 +2238,146 @@ mask-image: var(--cloud-cross-svg); } +%with-cloud-download-16-icon { + @extend %with-icon, %cloud-download-16-svg-prop; + background-image: var(--cloud-download-16-svg); +} +%with-cloud-download-16-mask { + @extend %with-mask, %cloud-download-16-svg-prop; + -webkit-mask-image: var(--cloud-download-16-svg); + mask-image: var(--cloud-download-16-svg); +} + +%with-cloud-download-24-icon { + @extend %with-icon, %cloud-download-24-svg-prop; + background-image: var(--cloud-download-24-svg); +} +%with-cloud-download-24-mask { + @extend %with-mask, %cloud-download-24-svg-prop; + -webkit-mask-image: var(--cloud-download-24-svg); + mask-image: var(--cloud-download-24-svg); +} + +%with-cloud-lightning-16-icon { + @extend %with-icon, %cloud-lightning-16-svg-prop; + background-image: var(--cloud-lightning-16-svg); +} +%with-cloud-lightning-16-mask { + @extend %with-mask, %cloud-lightning-16-svg-prop; + -webkit-mask-image: var(--cloud-lightning-16-svg); + mask-image: var(--cloud-lightning-16-svg); +} + +%with-cloud-lightning-24-icon { + @extend %with-icon, %cloud-lightning-24-svg-prop; + background-image: var(--cloud-lightning-24-svg); +} +%with-cloud-lightning-24-mask { + @extend %with-mask, %cloud-lightning-24-svg-prop; + -webkit-mask-image: var(--cloud-lightning-24-svg); + mask-image: var(--cloud-lightning-24-svg); +} + +%with-cloud-lock-16-icon { + @extend %with-icon, %cloud-lock-16-svg-prop; + background-image: var(--cloud-lock-16-svg); +} +%with-cloud-lock-16-mask { + @extend %with-mask, %cloud-lock-16-svg-prop; + -webkit-mask-image: var(--cloud-lock-16-svg); + mask-image: var(--cloud-lock-16-svg); +} + +%with-cloud-lock-24-icon { + @extend %with-icon, %cloud-lock-24-svg-prop; + background-image: var(--cloud-lock-24-svg); +} +%with-cloud-lock-24-mask { + @extend %with-mask, %cloud-lock-24-svg-prop; + -webkit-mask-image: var(--cloud-lock-24-svg); + mask-image: var(--cloud-lock-24-svg); +} + +%with-cloud-off-16-icon { + @extend %with-icon, %cloud-off-16-svg-prop; + background-image: var(--cloud-off-16-svg); +} +%with-cloud-off-16-mask { + @extend %with-mask, %cloud-off-16-svg-prop; + -webkit-mask-image: var(--cloud-off-16-svg); + mask-image: var(--cloud-off-16-svg); +} + +%with-cloud-off-24-icon { + @extend %with-icon, %cloud-off-24-svg-prop; + background-image: var(--cloud-off-24-svg); +} +%with-cloud-off-24-mask { + @extend %with-mask, %cloud-off-24-svg-prop; + -webkit-mask-image: var(--cloud-off-24-svg); + mask-image: var(--cloud-off-24-svg); +} + +%with-cloud-upload-16-icon { + @extend %with-icon, %cloud-upload-16-svg-prop; + background-image: var(--cloud-upload-16-svg); +} +%with-cloud-upload-16-mask { + @extend %with-mask, %cloud-upload-16-svg-prop; + -webkit-mask-image: var(--cloud-upload-16-svg); + mask-image: var(--cloud-upload-16-svg); +} + +%with-cloud-upload-24-icon { + @extend %with-icon, %cloud-upload-24-svg-prop; + background-image: var(--cloud-upload-24-svg); +} +%with-cloud-upload-24-mask { + @extend %with-mask, %cloud-upload-24-svg-prop; + -webkit-mask-image: var(--cloud-upload-24-svg); + mask-image: var(--cloud-upload-24-svg); +} + +%with-cloud-x-16-icon { + @extend %with-icon, %cloud-x-16-svg-prop; + background-image: var(--cloud-x-16-svg); +} +%with-cloud-x-16-mask { + @extend %with-mask, %cloud-x-16-svg-prop; + -webkit-mask-image: var(--cloud-x-16-svg); + mask-image: var(--cloud-x-16-svg); +} + +%with-cloud-x-24-icon { + @extend %with-icon, %cloud-x-24-svg-prop; + background-image: var(--cloud-x-24-svg); +} +%with-cloud-x-24-mask { + @extend %with-mask, %cloud-x-24-svg-prop; + -webkit-mask-image: var(--cloud-x-24-svg); + mask-image: var(--cloud-x-24-svg); +} + +%with-code-16-icon { + @extend %with-icon, %code-16-svg-prop; + background-image: var(--code-16-svg); +} +%with-code-16-mask { + @extend %with-mask, %code-16-svg-prop; + -webkit-mask-image: var(--code-16-svg); + mask-image: var(--code-16-svg); +} + +%with-code-24-icon { + @extend %with-icon, %code-24-svg-prop; + background-image: var(--code-24-svg); +} +%with-code-24-mask { + @extend %with-mask, %code-24-svg-prop; + -webkit-mask-image: var(--code-24-svg); + mask-image: var(--code-24-svg); +} + %with-code-icon { @extend %with-icon, %code-svg-prop; background-image: var(--code-svg); @@ -308,6 +2388,106 @@ mask-image: var(--code-svg); } +%with-collections-16-icon { + @extend %with-icon, %collections-16-svg-prop; + background-image: var(--collections-16-svg); +} +%with-collections-16-mask { + @extend %with-mask, %collections-16-svg-prop; + -webkit-mask-image: var(--collections-16-svg); + mask-image: var(--collections-16-svg); +} + +%with-collections-24-icon { + @extend %with-icon, %collections-24-svg-prop; + background-image: var(--collections-24-svg); +} +%with-collections-24-mask { + @extend %with-mask, %collections-24-svg-prop; + -webkit-mask-image: var(--collections-24-svg); + mask-image: var(--collections-24-svg); +} + +%with-command-16-icon { + @extend %with-icon, %command-16-svg-prop; + background-image: var(--command-16-svg); +} +%with-command-16-mask { + @extend %with-mask, %command-16-svg-prop; + -webkit-mask-image: var(--command-16-svg); + mask-image: var(--command-16-svg); +} + +%with-command-24-icon { + @extend %with-icon, %command-24-svg-prop; + background-image: var(--command-24-svg); +} +%with-command-24-mask { + @extend %with-mask, %command-24-svg-prop; + -webkit-mask-image: var(--command-24-svg); + mask-image: var(--command-24-svg); +} + +%with-compass-16-icon { + @extend %with-icon, %compass-16-svg-prop; + background-image: var(--compass-16-svg); +} +%with-compass-16-mask { + @extend %with-mask, %compass-16-svg-prop; + -webkit-mask-image: var(--compass-16-svg); + mask-image: var(--compass-16-svg); +} + +%with-compass-24-icon { + @extend %with-icon, %compass-24-svg-prop; + background-image: var(--compass-24-svg); +} +%with-compass-24-mask { + @extend %with-mask, %compass-24-svg-prop; + -webkit-mask-image: var(--compass-24-svg); + mask-image: var(--compass-24-svg); +} + +%with-connection-16-icon { + @extend %with-icon, %connection-16-svg-prop; + background-image: var(--connection-16-svg); +} +%with-connection-16-mask { + @extend %with-mask, %connection-16-svg-prop; + -webkit-mask-image: var(--connection-16-svg); + mask-image: var(--connection-16-svg); +} + +%with-connection-24-icon { + @extend %with-icon, %connection-24-svg-prop; + background-image: var(--connection-24-svg); +} +%with-connection-24-mask { + @extend %with-mask, %connection-24-svg-prop; + -webkit-mask-image: var(--connection-24-svg); + mask-image: var(--connection-24-svg); +} + +%with-connection-gateway-16-icon { + @extend %with-icon, %connection-gateway-16-svg-prop; + background-image: var(--connection-gateway-16-svg); +} +%with-connection-gateway-16-mask { + @extend %with-mask, %connection-gateway-16-svg-prop; + -webkit-mask-image: var(--connection-gateway-16-svg); + mask-image: var(--connection-gateway-16-svg); +} + +%with-connection-gateway-24-icon { + @extend %with-icon, %connection-gateway-24-svg-prop; + background-image: var(--connection-gateway-24-svg); +} +%with-connection-gateway-24-mask { + @extend %with-mask, %connection-gateway-24-svg-prop; + -webkit-mask-image: var(--connection-gateway-24-svg); + mask-image: var(--connection-gateway-24-svg); +} + %with-console-icon { @extend %with-icon, %console-svg-prop; background-image: var(--console-svg); @@ -338,6 +2518,286 @@ mask-image: var(--copy-success-svg); } +%with-corner-down-left-16-icon { + @extend %with-icon, %corner-down-left-16-svg-prop; + background-image: var(--corner-down-left-16-svg); +} +%with-corner-down-left-16-mask { + @extend %with-mask, %corner-down-left-16-svg-prop; + -webkit-mask-image: var(--corner-down-left-16-svg); + mask-image: var(--corner-down-left-16-svg); +} + +%with-corner-down-left-24-icon { + @extend %with-icon, %corner-down-left-24-svg-prop; + background-image: var(--corner-down-left-24-svg); +} +%with-corner-down-left-24-mask { + @extend %with-mask, %corner-down-left-24-svg-prop; + -webkit-mask-image: var(--corner-down-left-24-svg); + mask-image: var(--corner-down-left-24-svg); +} + +%with-corner-down-right-16-icon { + @extend %with-icon, %corner-down-right-16-svg-prop; + background-image: var(--corner-down-right-16-svg); +} +%with-corner-down-right-16-mask { + @extend %with-mask, %corner-down-right-16-svg-prop; + -webkit-mask-image: var(--corner-down-right-16-svg); + mask-image: var(--corner-down-right-16-svg); +} + +%with-corner-down-right-24-icon { + @extend %with-icon, %corner-down-right-24-svg-prop; + background-image: var(--corner-down-right-24-svg); +} +%with-corner-down-right-24-mask { + @extend %with-mask, %corner-down-right-24-svg-prop; + -webkit-mask-image: var(--corner-down-right-24-svg); + mask-image: var(--corner-down-right-24-svg); +} + +%with-corner-left-down-16-icon { + @extend %with-icon, %corner-left-down-16-svg-prop; + background-image: var(--corner-left-down-16-svg); +} +%with-corner-left-down-16-mask { + @extend %with-mask, %corner-left-down-16-svg-prop; + -webkit-mask-image: var(--corner-left-down-16-svg); + mask-image: var(--corner-left-down-16-svg); +} + +%with-corner-left-down-24-icon { + @extend %with-icon, %corner-left-down-24-svg-prop; + background-image: var(--corner-left-down-24-svg); +} +%with-corner-left-down-24-mask { + @extend %with-mask, %corner-left-down-24-svg-prop; + -webkit-mask-image: var(--corner-left-down-24-svg); + mask-image: var(--corner-left-down-24-svg); +} + +%with-corner-left-up-16-icon { + @extend %with-icon, %corner-left-up-16-svg-prop; + background-image: var(--corner-left-up-16-svg); +} +%with-corner-left-up-16-mask { + @extend %with-mask, %corner-left-up-16-svg-prop; + -webkit-mask-image: var(--corner-left-up-16-svg); + mask-image: var(--corner-left-up-16-svg); +} + +%with-corner-left-up-24-icon { + @extend %with-icon, %corner-left-up-24-svg-prop; + background-image: var(--corner-left-up-24-svg); +} +%with-corner-left-up-24-mask { + @extend %with-mask, %corner-left-up-24-svg-prop; + -webkit-mask-image: var(--corner-left-up-24-svg); + mask-image: var(--corner-left-up-24-svg); +} + +%with-corner-right-down-16-icon { + @extend %with-icon, %corner-right-down-16-svg-prop; + background-image: var(--corner-right-down-16-svg); +} +%with-corner-right-down-16-mask { + @extend %with-mask, %corner-right-down-16-svg-prop; + -webkit-mask-image: var(--corner-right-down-16-svg); + mask-image: var(--corner-right-down-16-svg); +} + +%with-corner-right-down-24-icon { + @extend %with-icon, %corner-right-down-24-svg-prop; + background-image: var(--corner-right-down-24-svg); +} +%with-corner-right-down-24-mask { + @extend %with-mask, %corner-right-down-24-svg-prop; + -webkit-mask-image: var(--corner-right-down-24-svg); + mask-image: var(--corner-right-down-24-svg); +} + +%with-corner-right-up-16-icon { + @extend %with-icon, %corner-right-up-16-svg-prop; + background-image: var(--corner-right-up-16-svg); +} +%with-corner-right-up-16-mask { + @extend %with-mask, %corner-right-up-16-svg-prop; + -webkit-mask-image: var(--corner-right-up-16-svg); + mask-image: var(--corner-right-up-16-svg); +} + +%with-corner-right-up-24-icon { + @extend %with-icon, %corner-right-up-24-svg-prop; + background-image: var(--corner-right-up-24-svg); +} +%with-corner-right-up-24-mask { + @extend %with-mask, %corner-right-up-24-svg-prop; + -webkit-mask-image: var(--corner-right-up-24-svg); + mask-image: var(--corner-right-up-24-svg); +} + +%with-corner-up-left-16-icon { + @extend %with-icon, %corner-up-left-16-svg-prop; + background-image: var(--corner-up-left-16-svg); +} +%with-corner-up-left-16-mask { + @extend %with-mask, %corner-up-left-16-svg-prop; + -webkit-mask-image: var(--corner-up-left-16-svg); + mask-image: var(--corner-up-left-16-svg); +} + +%with-corner-up-left-24-icon { + @extend %with-icon, %corner-up-left-24-svg-prop; + background-image: var(--corner-up-left-24-svg); +} +%with-corner-up-left-24-mask { + @extend %with-mask, %corner-up-left-24-svg-prop; + -webkit-mask-image: var(--corner-up-left-24-svg); + mask-image: var(--corner-up-left-24-svg); +} + +%with-corner-up-right-16-icon { + @extend %with-icon, %corner-up-right-16-svg-prop; + background-image: var(--corner-up-right-16-svg); +} +%with-corner-up-right-16-mask { + @extend %with-mask, %corner-up-right-16-svg-prop; + -webkit-mask-image: var(--corner-up-right-16-svg); + mask-image: var(--corner-up-right-16-svg); +} + +%with-corner-up-right-24-icon { + @extend %with-icon, %corner-up-right-24-svg-prop; + background-image: var(--corner-up-right-24-svg); +} +%with-corner-up-right-24-mask { + @extend %with-mask, %corner-up-right-24-svg-prop; + -webkit-mask-image: var(--corner-up-right-24-svg); + mask-image: var(--corner-up-right-24-svg); +} + +%with-cpu-16-icon { + @extend %with-icon, %cpu-16-svg-prop; + background-image: var(--cpu-16-svg); +} +%with-cpu-16-mask { + @extend %with-mask, %cpu-16-svg-prop; + -webkit-mask-image: var(--cpu-16-svg); + mask-image: var(--cpu-16-svg); +} + +%with-cpu-24-icon { + @extend %with-icon, %cpu-24-svg-prop; + background-image: var(--cpu-24-svg); +} +%with-cpu-24-mask { + @extend %with-mask, %cpu-24-svg-prop; + -webkit-mask-image: var(--cpu-24-svg); + mask-image: var(--cpu-24-svg); +} + +%with-credit-card-16-icon { + @extend %with-icon, %credit-card-16-svg-prop; + background-image: var(--credit-card-16-svg); +} +%with-credit-card-16-mask { + @extend %with-mask, %credit-card-16-svg-prop; + -webkit-mask-image: var(--credit-card-16-svg); + mask-image: var(--credit-card-16-svg); +} + +%with-credit-card-24-icon { + @extend %with-icon, %credit-card-24-svg-prop; + background-image: var(--credit-card-24-svg); +} +%with-credit-card-24-mask { + @extend %with-mask, %credit-card-24-svg-prop; + -webkit-mask-image: var(--credit-card-24-svg); + mask-image: var(--credit-card-24-svg); +} + +%with-crop-16-icon { + @extend %with-icon, %crop-16-svg-prop; + background-image: var(--crop-16-svg); +} +%with-crop-16-mask { + @extend %with-mask, %crop-16-svg-prop; + -webkit-mask-image: var(--crop-16-svg); + mask-image: var(--crop-16-svg); +} + +%with-crop-24-icon { + @extend %with-icon, %crop-24-svg-prop; + background-image: var(--crop-24-svg); +} +%with-crop-24-mask { + @extend %with-mask, %crop-24-svg-prop; + -webkit-mask-image: var(--crop-24-svg); + mask-image: var(--crop-24-svg); +} + +%with-crosshair-16-icon { + @extend %with-icon, %crosshair-16-svg-prop; + background-image: var(--crosshair-16-svg); +} +%with-crosshair-16-mask { + @extend %with-mask, %crosshair-16-svg-prop; + -webkit-mask-image: var(--crosshair-16-svg); + mask-image: var(--crosshair-16-svg); +} + +%with-crosshair-24-icon { + @extend %with-icon, %crosshair-24-svg-prop; + background-image: var(--crosshair-24-svg); +} +%with-crosshair-24-mask { + @extend %with-mask, %crosshair-24-svg-prop; + -webkit-mask-image: var(--crosshair-24-svg); + mask-image: var(--crosshair-24-svg); +} + +%with-dashboard-16-icon { + @extend %with-icon, %dashboard-16-svg-prop; + background-image: var(--dashboard-16-svg); +} +%with-dashboard-16-mask { + @extend %with-mask, %dashboard-16-svg-prop; + -webkit-mask-image: var(--dashboard-16-svg); + mask-image: var(--dashboard-16-svg); +} + +%with-dashboard-24-icon { + @extend %with-icon, %dashboard-24-svg-prop; + background-image: var(--dashboard-24-svg); +} +%with-dashboard-24-mask { + @extend %with-mask, %dashboard-24-svg-prop; + -webkit-mask-image: var(--dashboard-24-svg); + mask-image: var(--dashboard-24-svg); +} + +%with-database-16-icon { + @extend %with-icon, %database-16-svg-prop; + background-image: var(--database-16-svg); +} +%with-database-16-mask { + @extend %with-mask, %database-16-svg-prop; + -webkit-mask-image: var(--database-16-svg); + mask-image: var(--database-16-svg); +} + +%with-database-24-icon { + @extend %with-icon, %database-24-svg-prop; + background-image: var(--database-24-svg); +} +%with-database-24-mask { + @extend %with-mask, %database-24-svg-prop; + -webkit-mask-image: var(--database-24-svg); + mask-image: var(--database-24-svg); +} + %with-database-icon { @extend %with-icon, %database-svg-prop; background-image: var(--database-svg); @@ -348,6 +2808,26 @@ mask-image: var(--database-svg); } +%with-delay-16-icon { + @extend %with-icon, %delay-16-svg-prop; + background-image: var(--delay-16-svg); +} +%with-delay-16-mask { + @extend %with-mask, %delay-16-svg-prop; + -webkit-mask-image: var(--delay-16-svg); + mask-image: var(--delay-16-svg); +} + +%with-delay-24-icon { + @extend %with-icon, %delay-24-svg-prop; + background-image: var(--delay-24-svg); +} +%with-delay-24-mask { + @extend %with-mask, %delay-24-svg-prop; + -webkit-mask-image: var(--delay-24-svg); + mask-image: var(--delay-24-svg); +} + %with-delay-icon { @extend %with-icon, %delay-svg-prop; background-image: var(--delay-svg); @@ -358,6 +2838,26 @@ mask-image: var(--delay-svg); } +%with-delete-16-icon { + @extend %with-icon, %delete-16-svg-prop; + background-image: var(--delete-16-svg); +} +%with-delete-16-mask { + @extend %with-mask, %delete-16-svg-prop; + -webkit-mask-image: var(--delete-16-svg); + mask-image: var(--delete-16-svg); +} + +%with-delete-24-icon { + @extend %with-icon, %delete-24-svg-prop; + background-image: var(--delete-24-svg); +} +%with-delete-24-mask { + @extend %with-mask, %delete-24-svg-prop; + -webkit-mask-image: var(--delete-24-svg); + mask-image: var(--delete-24-svg); +} + %with-deny-alt-icon { @extend %with-icon, %deny-alt-svg-prop; background-image: var(--deny-alt-svg); @@ -388,6 +2888,46 @@ mask-image: var(--deny-default-svg); } +%with-diamond-16-icon { + @extend %with-icon, %diamond-16-svg-prop; + background-image: var(--diamond-16-svg); +} +%with-diamond-16-mask { + @extend %with-mask, %diamond-16-svg-prop; + -webkit-mask-image: var(--diamond-16-svg); + mask-image: var(--diamond-16-svg); +} + +%with-diamond-24-icon { + @extend %with-icon, %diamond-24-svg-prop; + background-image: var(--diamond-24-svg); +} +%with-diamond-24-mask { + @extend %with-mask, %diamond-24-svg-prop; + -webkit-mask-image: var(--diamond-24-svg); + mask-image: var(--diamond-24-svg); +} + +%with-diamond-fill-16-icon { + @extend %with-icon, %diamond-fill-16-svg-prop; + background-image: var(--diamond-fill-16-svg); +} +%with-diamond-fill-16-mask { + @extend %with-mask, %diamond-fill-16-svg-prop; + -webkit-mask-image: var(--diamond-fill-16-svg); + mask-image: var(--diamond-fill-16-svg); +} + +%with-diamond-fill-24-icon { + @extend %with-icon, %diamond-fill-24-svg-prop; + background-image: var(--diamond-fill-24-svg); +} +%with-diamond-fill-24-mask { + @extend %with-mask, %diamond-fill-24-svg-prop; + -webkit-mask-image: var(--diamond-fill-24-svg); + mask-image: var(--diamond-fill-24-svg); +} + %with-disabled-icon { @extend %with-icon, %disabled-svg-prop; background-image: var(--disabled-svg); @@ -398,6 +2938,166 @@ mask-image: var(--disabled-svg); } +%with-disc-16-icon { + @extend %with-icon, %disc-16-svg-prop; + background-image: var(--disc-16-svg); +} +%with-disc-16-mask { + @extend %with-mask, %disc-16-svg-prop; + -webkit-mask-image: var(--disc-16-svg); + mask-image: var(--disc-16-svg); +} + +%with-disc-24-icon { + @extend %with-icon, %disc-24-svg-prop; + background-image: var(--disc-24-svg); +} +%with-disc-24-mask { + @extend %with-mask, %disc-24-svg-prop; + -webkit-mask-image: var(--disc-24-svg); + mask-image: var(--disc-24-svg); +} + +%with-discussion-circle-16-icon { + @extend %with-icon, %discussion-circle-16-svg-prop; + background-image: var(--discussion-circle-16-svg); +} +%with-discussion-circle-16-mask { + @extend %with-mask, %discussion-circle-16-svg-prop; + -webkit-mask-image: var(--discussion-circle-16-svg); + mask-image: var(--discussion-circle-16-svg); +} + +%with-discussion-circle-24-icon { + @extend %with-icon, %discussion-circle-24-svg-prop; + background-image: var(--discussion-circle-24-svg); +} +%with-discussion-circle-24-mask { + @extend %with-mask, %discussion-circle-24-svg-prop; + -webkit-mask-image: var(--discussion-circle-24-svg); + mask-image: var(--discussion-circle-24-svg); +} + +%with-discussion-square-16-icon { + @extend %with-icon, %discussion-square-16-svg-prop; + background-image: var(--discussion-square-16-svg); +} +%with-discussion-square-16-mask { + @extend %with-mask, %discussion-square-16-svg-prop; + -webkit-mask-image: var(--discussion-square-16-svg); + mask-image: var(--discussion-square-16-svg); +} + +%with-discussion-square-24-icon { + @extend %with-icon, %discussion-square-24-svg-prop; + background-image: var(--discussion-square-24-svg); +} +%with-discussion-square-24-mask { + @extend %with-mask, %discussion-square-24-svg-prop; + -webkit-mask-image: var(--discussion-square-24-svg); + mask-image: var(--discussion-square-24-svg); +} + +%with-docker-16-icon { + @extend %with-icon, %docker-16-svg-prop; + background-image: var(--docker-16-svg); +} +%with-docker-16-mask { + @extend %with-mask, %docker-16-svg-prop; + -webkit-mask-image: var(--docker-16-svg); + mask-image: var(--docker-16-svg); +} + +%with-docker-24-icon { + @extend %with-icon, %docker-24-svg-prop; + background-image: var(--docker-24-svg); +} +%with-docker-24-mask { + @extend %with-mask, %docker-24-svg-prop; + -webkit-mask-image: var(--docker-24-svg); + mask-image: var(--docker-24-svg); +} + +%with-docker-color-16-icon { + @extend %with-icon, %docker-color-16-svg-prop; + background-image: var(--docker-color-16-svg); +} +%with-docker-color-16-mask { + @extend %with-mask, %docker-color-16-svg-prop; + -webkit-mask-image: var(--docker-color-16-svg); + mask-image: var(--docker-color-16-svg); +} + +%with-docker-color-24-icon { + @extend %with-icon, %docker-color-24-svg-prop; + background-image: var(--docker-color-24-svg); +} +%with-docker-color-24-mask { + @extend %with-mask, %docker-color-24-svg-prop; + -webkit-mask-image: var(--docker-color-24-svg); + mask-image: var(--docker-color-24-svg); +} + +%with-docs-16-icon { + @extend %with-icon, %docs-16-svg-prop; + background-image: var(--docs-16-svg); +} +%with-docs-16-mask { + @extend %with-mask, %docs-16-svg-prop; + -webkit-mask-image: var(--docs-16-svg); + mask-image: var(--docs-16-svg); +} + +%with-docs-24-icon { + @extend %with-icon, %docs-24-svg-prop; + background-image: var(--docs-24-svg); +} +%with-docs-24-mask { + @extend %with-mask, %docs-24-svg-prop; + -webkit-mask-image: var(--docs-24-svg); + mask-image: var(--docs-24-svg); +} + +%with-docs-download-16-icon { + @extend %with-icon, %docs-download-16-svg-prop; + background-image: var(--docs-download-16-svg); +} +%with-docs-download-16-mask { + @extend %with-mask, %docs-download-16-svg-prop; + -webkit-mask-image: var(--docs-download-16-svg); + mask-image: var(--docs-download-16-svg); +} + +%with-docs-download-24-icon { + @extend %with-icon, %docs-download-24-svg-prop; + background-image: var(--docs-download-24-svg); +} +%with-docs-download-24-mask { + @extend %with-mask, %docs-download-24-svg-prop; + -webkit-mask-image: var(--docs-download-24-svg); + mask-image: var(--docs-download-24-svg); +} + +%with-docs-link-16-icon { + @extend %with-icon, %docs-link-16-svg-prop; + background-image: var(--docs-link-16-svg); +} +%with-docs-link-16-mask { + @extend %with-mask, %docs-link-16-svg-prop; + -webkit-mask-image: var(--docs-link-16-svg); + mask-image: var(--docs-link-16-svg); +} + +%with-docs-link-24-icon { + @extend %with-icon, %docs-link-24-svg-prop; + background-image: var(--docs-link-24-svg); +} +%with-docs-link-24-mask { + @extend %with-mask, %docs-link-24-svg-prop; + -webkit-mask-image: var(--docs-link-24-svg); + mask-image: var(--docs-link-24-svg); +} + %with-docs-icon { @extend %with-icon, %docs-svg-prop; background-image: var(--docs-svg); @@ -408,6 +3108,86 @@ mask-image: var(--docs-svg); } +%with-dollar-sign-16-icon { + @extend %with-icon, %dollar-sign-16-svg-prop; + background-image: var(--dollar-sign-16-svg); +} +%with-dollar-sign-16-mask { + @extend %with-mask, %dollar-sign-16-svg-prop; + -webkit-mask-image: var(--dollar-sign-16-svg); + mask-image: var(--dollar-sign-16-svg); +} + +%with-dollar-sign-24-icon { + @extend %with-icon, %dollar-sign-24-svg-prop; + background-image: var(--dollar-sign-24-svg); +} +%with-dollar-sign-24-mask { + @extend %with-mask, %dollar-sign-24-svg-prop; + -webkit-mask-image: var(--dollar-sign-24-svg); + mask-image: var(--dollar-sign-24-svg); +} + +%with-dot-16-icon { + @extend %with-icon, %dot-16-svg-prop; + background-image: var(--dot-16-svg); +} +%with-dot-16-mask { + @extend %with-mask, %dot-16-svg-prop; + -webkit-mask-image: var(--dot-16-svg); + mask-image: var(--dot-16-svg); +} + +%with-dot-24-icon { + @extend %with-icon, %dot-24-svg-prop; + background-image: var(--dot-24-svg); +} +%with-dot-24-mask { + @extend %with-mask, %dot-24-svg-prop; + -webkit-mask-image: var(--dot-24-svg); + mask-image: var(--dot-24-svg); +} + +%with-dot-half-16-icon { + @extend %with-icon, %dot-half-16-svg-prop; + background-image: var(--dot-half-16-svg); +} +%with-dot-half-16-mask { + @extend %with-mask, %dot-half-16-svg-prop; + -webkit-mask-image: var(--dot-half-16-svg); + mask-image: var(--dot-half-16-svg); +} + +%with-dot-half-24-icon { + @extend %with-icon, %dot-half-24-svg-prop; + background-image: var(--dot-half-24-svg); +} +%with-dot-half-24-mask { + @extend %with-mask, %dot-half-24-svg-prop; + -webkit-mask-image: var(--dot-half-24-svg); + mask-image: var(--dot-half-24-svg); +} + +%with-download-16-icon { + @extend %with-icon, %download-16-svg-prop; + background-image: var(--download-16-svg); +} +%with-download-16-mask { + @extend %with-mask, %download-16-svg-prop; + -webkit-mask-image: var(--download-16-svg); + mask-image: var(--download-16-svg); +} + +%with-download-24-icon { + @extend %with-icon, %download-24-svg-prop; + background-image: var(--download-24-svg); +} +%with-download-24-mask { + @extend %with-mask, %download-24-svg-prop; + -webkit-mask-image: var(--download-24-svg); + mask-image: var(--download-24-svg); +} + %with-download-icon { @extend %with-icon, %download-svg-prop; background-image: var(--download-svg); @@ -418,6 +3198,66 @@ mask-image: var(--download-svg); } +%with-droplet-16-icon { + @extend %with-icon, %droplet-16-svg-prop; + background-image: var(--droplet-16-svg); +} +%with-droplet-16-mask { + @extend %with-mask, %droplet-16-svg-prop; + -webkit-mask-image: var(--droplet-16-svg); + mask-image: var(--droplet-16-svg); +} + +%with-droplet-24-icon { + @extend %with-icon, %droplet-24-svg-prop; + background-image: var(--droplet-24-svg); +} +%with-droplet-24-mask { + @extend %with-mask, %droplet-24-svg-prop; + -webkit-mask-image: var(--droplet-24-svg); + mask-image: var(--droplet-24-svg); +} + +%with-duplicate-16-icon { + @extend %with-icon, %duplicate-16-svg-prop; + background-image: var(--duplicate-16-svg); +} +%with-duplicate-16-mask { + @extend %with-mask, %duplicate-16-svg-prop; + -webkit-mask-image: var(--duplicate-16-svg); + mask-image: var(--duplicate-16-svg); +} + +%with-duplicate-24-icon { + @extend %with-icon, %duplicate-24-svg-prop; + background-image: var(--duplicate-24-svg); +} +%with-duplicate-24-mask { + @extend %with-mask, %duplicate-24-svg-prop; + -webkit-mask-image: var(--duplicate-24-svg); + mask-image: var(--duplicate-24-svg); +} + +%with-edit-16-icon { + @extend %with-icon, %edit-16-svg-prop; + background-image: var(--edit-16-svg); +} +%with-edit-16-mask { + @extend %with-mask, %edit-16-svg-prop; + -webkit-mask-image: var(--edit-16-svg); + mask-image: var(--edit-16-svg); +} + +%with-edit-24-icon { + @extend %with-icon, %edit-24-svg-prop; + background-image: var(--edit-24-svg); +} +%with-edit-24-mask { + @extend %with-mask, %edit-24-svg-prop; + -webkit-mask-image: var(--edit-24-svg); + mask-image: var(--edit-24-svg); +} + %with-edit-icon { @extend %with-icon, %edit-svg-prop; background-image: var(--edit-svg); @@ -428,6 +3268,26 @@ mask-image: var(--edit-svg); } +%with-entry-point-16-icon { + @extend %with-icon, %entry-point-16-svg-prop; + background-image: var(--entry-point-16-svg); +} +%with-entry-point-16-mask { + @extend %with-mask, %entry-point-16-svg-prop; + -webkit-mask-image: var(--entry-point-16-svg); + mask-image: var(--entry-point-16-svg); +} + +%with-entry-point-24-icon { + @extend %with-icon, %entry-point-24-svg-prop; + background-image: var(--entry-point-24-svg); +} +%with-entry-point-24-mask { + @extend %with-mask, %entry-point-24-svg-prop; + -webkit-mask-image: var(--entry-point-24-svg); + mask-image: var(--entry-point-24-svg); +} + %with-envelope-sealed-fill-icon { @extend %with-icon, %envelope-sealed-fill-svg-prop; background-image: var(--envelope-sealed-fill-svg); @@ -468,6 +3328,46 @@ mask-image: var(--envelope-unsealed-fill-svg); } +%with-event-16-icon { + @extend %with-icon, %event-16-svg-prop; + background-image: var(--event-16-svg); +} +%with-event-16-mask { + @extend %with-mask, %event-16-svg-prop; + -webkit-mask-image: var(--event-16-svg); + mask-image: var(--event-16-svg); +} + +%with-event-24-icon { + @extend %with-icon, %event-24-svg-prop; + background-image: var(--event-24-svg); +} +%with-event-24-mask { + @extend %with-mask, %event-24-svg-prop; + -webkit-mask-image: var(--event-24-svg); + mask-image: var(--event-24-svg); +} + +%with-exit-point-16-icon { + @extend %with-icon, %exit-point-16-svg-prop; + background-image: var(--exit-point-16-svg); +} +%with-exit-point-16-mask { + @extend %with-mask, %exit-point-16-svg-prop; + -webkit-mask-image: var(--exit-point-16-svg); + mask-image: var(--exit-point-16-svg); +} + +%with-exit-point-24-icon { + @extend %with-icon, %exit-point-24-svg-prop; + background-image: var(--exit-point-24-svg); +} +%with-exit-point-24-mask { + @extend %with-mask, %exit-point-24-svg-prop; + -webkit-mask-image: var(--exit-point-24-svg); + mask-image: var(--exit-point-24-svg); +} + %with-exit-icon { @extend %with-icon, %exit-svg-prop; background-image: var(--exit-svg); @@ -498,6 +3398,206 @@ mask-image: var(--expand-more-svg); } +%with-external-link-16-icon { + @extend %with-icon, %external-link-16-svg-prop; + background-image: var(--external-link-16-svg); +} +%with-external-link-16-mask { + @extend %with-mask, %external-link-16-svg-prop; + -webkit-mask-image: var(--external-link-16-svg); + mask-image: var(--external-link-16-svg); +} + +%with-external-link-24-icon { + @extend %with-icon, %external-link-24-svg-prop; + background-image: var(--external-link-24-svg); +} +%with-external-link-24-mask { + @extend %with-mask, %external-link-24-svg-prop; + -webkit-mask-image: var(--external-link-24-svg); + mask-image: var(--external-link-24-svg); +} + +%with-eye-16-icon { + @extend %with-icon, %eye-16-svg-prop; + background-image: var(--eye-16-svg); +} +%with-eye-16-mask { + @extend %with-mask, %eye-16-svg-prop; + -webkit-mask-image: var(--eye-16-svg); + mask-image: var(--eye-16-svg); +} + +%with-eye-24-icon { + @extend %with-icon, %eye-24-svg-prop; + background-image: var(--eye-24-svg); +} +%with-eye-24-mask { + @extend %with-mask, %eye-24-svg-prop; + -webkit-mask-image: var(--eye-24-svg); + mask-image: var(--eye-24-svg); +} + +%with-eye-off-16-icon { + @extend %with-icon, %eye-off-16-svg-prop; + background-image: var(--eye-off-16-svg); +} +%with-eye-off-16-mask { + @extend %with-mask, %eye-off-16-svg-prop; + -webkit-mask-image: var(--eye-off-16-svg); + mask-image: var(--eye-off-16-svg); +} + +%with-eye-off-24-icon { + @extend %with-icon, %eye-off-24-svg-prop; + background-image: var(--eye-off-24-svg); +} +%with-eye-off-24-mask { + @extend %with-mask, %eye-off-24-svg-prop; + -webkit-mask-image: var(--eye-off-24-svg); + mask-image: var(--eye-off-24-svg); +} + +%with-f5-16-icon { + @extend %with-icon, %f5-16-svg-prop; + background-image: var(--f5-16-svg); +} +%with-f5-16-mask { + @extend %with-mask, %f5-16-svg-prop; + -webkit-mask-image: var(--f5-16-svg); + mask-image: var(--f5-16-svg); +} + +%with-f5-24-icon { + @extend %with-icon, %f5-24-svg-prop; + background-image: var(--f5-24-svg); +} +%with-f5-24-mask { + @extend %with-mask, %f5-24-svg-prop; + -webkit-mask-image: var(--f5-24-svg); + mask-image: var(--f5-24-svg); +} + +%with-f5-color-16-icon { + @extend %with-icon, %f5-color-16-svg-prop; + background-image: var(--f5-color-16-svg); +} +%with-f5-color-16-mask { + @extend %with-mask, %f5-color-16-svg-prop; + -webkit-mask-image: var(--f5-color-16-svg); + mask-image: var(--f5-color-16-svg); +} + +%with-f5-color-24-icon { + @extend %with-icon, %f5-color-24-svg-prop; + background-image: var(--f5-color-24-svg); +} +%with-f5-color-24-mask { + @extend %with-mask, %f5-color-24-svg-prop; + -webkit-mask-image: var(--f5-color-24-svg); + mask-image: var(--f5-color-24-svg); +} + +%with-fast-forward-16-icon { + @extend %with-icon, %fast-forward-16-svg-prop; + background-image: var(--fast-forward-16-svg); +} +%with-fast-forward-16-mask { + @extend %with-mask, %fast-forward-16-svg-prop; + -webkit-mask-image: var(--fast-forward-16-svg); + mask-image: var(--fast-forward-16-svg); +} + +%with-fast-forward-24-icon { + @extend %with-icon, %fast-forward-24-svg-prop; + background-image: var(--fast-forward-24-svg); +} +%with-fast-forward-24-mask { + @extend %with-mask, %fast-forward-24-svg-prop; + -webkit-mask-image: var(--fast-forward-24-svg); + mask-image: var(--fast-forward-24-svg); +} + +%with-file-16-icon { + @extend %with-icon, %file-16-svg-prop; + background-image: var(--file-16-svg); +} +%with-file-16-mask { + @extend %with-mask, %file-16-svg-prop; + -webkit-mask-image: var(--file-16-svg); + mask-image: var(--file-16-svg); +} + +%with-file-24-icon { + @extend %with-icon, %file-24-svg-prop; + background-image: var(--file-24-svg); +} +%with-file-24-mask { + @extend %with-mask, %file-24-svg-prop; + -webkit-mask-image: var(--file-24-svg); + mask-image: var(--file-24-svg); +} + +%with-file-change-16-icon { + @extend %with-icon, %file-change-16-svg-prop; + background-image: var(--file-change-16-svg); +} +%with-file-change-16-mask { + @extend %with-mask, %file-change-16-svg-prop; + -webkit-mask-image: var(--file-change-16-svg); + mask-image: var(--file-change-16-svg); +} + +%with-file-change-24-icon { + @extend %with-icon, %file-change-24-svg-prop; + background-image: var(--file-change-24-svg); +} +%with-file-change-24-mask { + @extend %with-mask, %file-change-24-svg-prop; + -webkit-mask-image: var(--file-change-24-svg); + mask-image: var(--file-change-24-svg); +} + +%with-file-check-16-icon { + @extend %with-icon, %file-check-16-svg-prop; + background-image: var(--file-check-16-svg); +} +%with-file-check-16-mask { + @extend %with-mask, %file-check-16-svg-prop; + -webkit-mask-image: var(--file-check-16-svg); + mask-image: var(--file-check-16-svg); +} + +%with-file-check-24-icon { + @extend %with-icon, %file-check-24-svg-prop; + background-image: var(--file-check-24-svg); +} +%with-file-check-24-mask { + @extend %with-mask, %file-check-24-svg-prop; + -webkit-mask-image: var(--file-check-24-svg); + mask-image: var(--file-check-24-svg); +} + +%with-file-diff-16-icon { + @extend %with-icon, %file-diff-16-svg-prop; + background-image: var(--file-diff-16-svg); +} +%with-file-diff-16-mask { + @extend %with-mask, %file-diff-16-svg-prop; + -webkit-mask-image: var(--file-diff-16-svg); + mask-image: var(--file-diff-16-svg); +} + +%with-file-diff-24-icon { + @extend %with-icon, %file-diff-24-svg-prop; + background-image: var(--file-diff-24-svg); +} +%with-file-diff-24-mask { + @extend %with-mask, %file-diff-24-svg-prop; + -webkit-mask-image: var(--file-diff-24-svg); + mask-image: var(--file-diff-24-svg); +} + %with-file-fill-icon { @extend %with-icon, %file-fill-svg-prop; background-image: var(--file-fill-svg); @@ -508,6 +3608,26 @@ mask-image: var(--file-fill-svg); } +%with-file-minus-16-icon { + @extend %with-icon, %file-minus-16-svg-prop; + background-image: var(--file-minus-16-svg); +} +%with-file-minus-16-mask { + @extend %with-mask, %file-minus-16-svg-prop; + -webkit-mask-image: var(--file-minus-16-svg); + mask-image: var(--file-minus-16-svg); +} + +%with-file-minus-24-icon { + @extend %with-icon, %file-minus-24-svg-prop; + background-image: var(--file-minus-24-svg); +} +%with-file-minus-24-mask { + @extend %with-mask, %file-minus-24-svg-prop; + -webkit-mask-image: var(--file-minus-24-svg); + mask-image: var(--file-minus-24-svg); +} + %with-file-outline-icon { @extend %with-icon, %file-outline-svg-prop; background-image: var(--file-outline-svg); @@ -518,6 +3638,186 @@ mask-image: var(--file-outline-svg); } +%with-file-plus-16-icon { + @extend %with-icon, %file-plus-16-svg-prop; + background-image: var(--file-plus-16-svg); +} +%with-file-plus-16-mask { + @extend %with-mask, %file-plus-16-svg-prop; + -webkit-mask-image: var(--file-plus-16-svg); + mask-image: var(--file-plus-16-svg); +} + +%with-file-plus-24-icon { + @extend %with-icon, %file-plus-24-svg-prop; + background-image: var(--file-plus-24-svg); +} +%with-file-plus-24-mask { + @extend %with-mask, %file-plus-24-svg-prop; + -webkit-mask-image: var(--file-plus-24-svg); + mask-image: var(--file-plus-24-svg); +} + +%with-file-source-16-icon { + @extend %with-icon, %file-source-16-svg-prop; + background-image: var(--file-source-16-svg); +} +%with-file-source-16-mask { + @extend %with-mask, %file-source-16-svg-prop; + -webkit-mask-image: var(--file-source-16-svg); + mask-image: var(--file-source-16-svg); +} + +%with-file-source-24-icon { + @extend %with-icon, %file-source-24-svg-prop; + background-image: var(--file-source-24-svg); +} +%with-file-source-24-mask { + @extend %with-mask, %file-source-24-svg-prop; + -webkit-mask-image: var(--file-source-24-svg); + mask-image: var(--file-source-24-svg); +} + +%with-file-text-16-icon { + @extend %with-icon, %file-text-16-svg-prop; + background-image: var(--file-text-16-svg); +} +%with-file-text-16-mask { + @extend %with-mask, %file-text-16-svg-prop; + -webkit-mask-image: var(--file-text-16-svg); + mask-image: var(--file-text-16-svg); +} + +%with-file-text-24-icon { + @extend %with-icon, %file-text-24-svg-prop; + background-image: var(--file-text-24-svg); +} +%with-file-text-24-mask { + @extend %with-mask, %file-text-24-svg-prop; + -webkit-mask-image: var(--file-text-24-svg); + mask-image: var(--file-text-24-svg); +} + +%with-file-x-16-icon { + @extend %with-icon, %file-x-16-svg-prop; + background-image: var(--file-x-16-svg); +} +%with-file-x-16-mask { + @extend %with-mask, %file-x-16-svg-prop; + -webkit-mask-image: var(--file-x-16-svg); + mask-image: var(--file-x-16-svg); +} + +%with-file-x-24-icon { + @extend %with-icon, %file-x-24-svg-prop; + background-image: var(--file-x-24-svg); +} +%with-file-x-24-mask { + @extend %with-mask, %file-x-24-svg-prop; + -webkit-mask-image: var(--file-x-24-svg); + mask-image: var(--file-x-24-svg); +} + +%with-files-16-icon { + @extend %with-icon, %files-16-svg-prop; + background-image: var(--files-16-svg); +} +%with-files-16-mask { + @extend %with-mask, %files-16-svg-prop; + -webkit-mask-image: var(--files-16-svg); + mask-image: var(--files-16-svg); +} + +%with-files-24-icon { + @extend %with-icon, %files-24-svg-prop; + background-image: var(--files-24-svg); +} +%with-files-24-mask { + @extend %with-mask, %files-24-svg-prop; + -webkit-mask-image: var(--files-24-svg); + mask-image: var(--files-24-svg); +} + +%with-film-16-icon { + @extend %with-icon, %film-16-svg-prop; + background-image: var(--film-16-svg); +} +%with-film-16-mask { + @extend %with-mask, %film-16-svg-prop; + -webkit-mask-image: var(--film-16-svg); + mask-image: var(--film-16-svg); +} + +%with-film-24-icon { + @extend %with-icon, %film-24-svg-prop; + background-image: var(--film-24-svg); +} +%with-film-24-mask { + @extend %with-mask, %film-24-svg-prop; + -webkit-mask-image: var(--film-24-svg); + mask-image: var(--film-24-svg); +} + +%with-filter-16-icon { + @extend %with-icon, %filter-16-svg-prop; + background-image: var(--filter-16-svg); +} +%with-filter-16-mask { + @extend %with-mask, %filter-16-svg-prop; + -webkit-mask-image: var(--filter-16-svg); + mask-image: var(--filter-16-svg); +} + +%with-filter-24-icon { + @extend %with-icon, %filter-24-svg-prop; + background-image: var(--filter-24-svg); +} +%with-filter-24-mask { + @extend %with-mask, %filter-24-svg-prop; + -webkit-mask-image: var(--filter-24-svg); + mask-image: var(--filter-24-svg); +} + +%with-filter-circle-16-icon { + @extend %with-icon, %filter-circle-16-svg-prop; + background-image: var(--filter-circle-16-svg); +} +%with-filter-circle-16-mask { + @extend %with-mask, %filter-circle-16-svg-prop; + -webkit-mask-image: var(--filter-circle-16-svg); + mask-image: var(--filter-circle-16-svg); +} + +%with-filter-circle-24-icon { + @extend %with-icon, %filter-circle-24-svg-prop; + background-image: var(--filter-circle-24-svg); +} +%with-filter-circle-24-mask { + @extend %with-mask, %filter-circle-24-svg-prop; + -webkit-mask-image: var(--filter-circle-24-svg); + mask-image: var(--filter-circle-24-svg); +} + +%with-filter-fill-16-icon { + @extend %with-icon, %filter-fill-16-svg-prop; + background-image: var(--filter-fill-16-svg); +} +%with-filter-fill-16-mask { + @extend %with-mask, %filter-fill-16-svg-prop; + -webkit-mask-image: var(--filter-fill-16-svg); + mask-image: var(--filter-fill-16-svg); +} + +%with-filter-fill-24-icon { + @extend %with-icon, %filter-fill-24-svg-prop; + background-image: var(--filter-fill-24-svg); +} +%with-filter-fill-24-mask { + @extend %with-mask, %filter-fill-24-svg-prop; + -webkit-mask-image: var(--filter-fill-24-svg); + mask-image: var(--filter-fill-24-svg); +} + %with-filter-icon { @extend %with-icon, %filter-svg-prop; background-image: var(--filter-svg); @@ -528,6 +3828,46 @@ mask-image: var(--filter-svg); } +%with-fingerprint-16-icon { + @extend %with-icon, %fingerprint-16-svg-prop; + background-image: var(--fingerprint-16-svg); +} +%with-fingerprint-16-mask { + @extend %with-mask, %fingerprint-16-svg-prop; + -webkit-mask-image: var(--fingerprint-16-svg); + mask-image: var(--fingerprint-16-svg); +} + +%with-fingerprint-24-icon { + @extend %with-icon, %fingerprint-24-svg-prop; + background-image: var(--fingerprint-24-svg); +} +%with-fingerprint-24-mask { + @extend %with-mask, %fingerprint-24-svg-prop; + -webkit-mask-image: var(--fingerprint-24-svg); + mask-image: var(--fingerprint-24-svg); +} + +%with-flag-16-icon { + @extend %with-icon, %flag-16-svg-prop; + background-image: var(--flag-16-svg); +} +%with-flag-16-mask { + @extend %with-mask, %flag-16-svg-prop; + -webkit-mask-image: var(--flag-16-svg); + mask-image: var(--flag-16-svg); +} + +%with-flag-24-icon { + @extend %with-icon, %flag-24-svg-prop; + background-image: var(--flag-24-svg); +} +%with-flag-24-mask { + @extend %with-mask, %flag-24-svg-prop; + -webkit-mask-image: var(--flag-24-svg); + mask-image: var(--flag-24-svg); +} + %with-flag-icon { @extend %with-icon, %flag-svg-prop; background-image: var(--flag-svg); @@ -538,6 +3878,46 @@ mask-image: var(--flag-svg); } +%with-folder-16-icon { + @extend %with-icon, %folder-16-svg-prop; + background-image: var(--folder-16-svg); +} +%with-folder-16-mask { + @extend %with-mask, %folder-16-svg-prop; + -webkit-mask-image: var(--folder-16-svg); + mask-image: var(--folder-16-svg); +} + +%with-folder-24-icon { + @extend %with-icon, %folder-24-svg-prop; + background-image: var(--folder-24-svg); +} +%with-folder-24-mask { + @extend %with-mask, %folder-24-svg-prop; + -webkit-mask-image: var(--folder-24-svg); + mask-image: var(--folder-24-svg); +} + +%with-folder-fill-16-icon { + @extend %with-icon, %folder-fill-16-svg-prop; + background-image: var(--folder-fill-16-svg); +} +%with-folder-fill-16-mask { + @extend %with-mask, %folder-fill-16-svg-prop; + -webkit-mask-image: var(--folder-fill-16-svg); + mask-image: var(--folder-fill-16-svg); +} + +%with-folder-fill-24-icon { + @extend %with-icon, %folder-fill-24-svg-prop; + background-image: var(--folder-fill-24-svg); +} +%with-folder-fill-24-mask { + @extend %with-mask, %folder-fill-24-svg-prop; + -webkit-mask-image: var(--folder-fill-24-svg); + mask-image: var(--folder-fill-24-svg); +} + %with-folder-fill-icon { @extend %with-icon, %folder-fill-svg-prop; background-image: var(--folder-fill-svg); @@ -548,6 +3928,46 @@ mask-image: var(--folder-fill-svg); } +%with-folder-minus-16-icon { + @extend %with-icon, %folder-minus-16-svg-prop; + background-image: var(--folder-minus-16-svg); +} +%with-folder-minus-16-mask { + @extend %with-mask, %folder-minus-16-svg-prop; + -webkit-mask-image: var(--folder-minus-16-svg); + mask-image: var(--folder-minus-16-svg); +} + +%with-folder-minus-24-icon { + @extend %with-icon, %folder-minus-24-svg-prop; + background-image: var(--folder-minus-24-svg); +} +%with-folder-minus-24-mask { + @extend %with-mask, %folder-minus-24-svg-prop; + -webkit-mask-image: var(--folder-minus-24-svg); + mask-image: var(--folder-minus-24-svg); +} + +%with-folder-minus-fill-16-icon { + @extend %with-icon, %folder-minus-fill-16-svg-prop; + background-image: var(--folder-minus-fill-16-svg); +} +%with-folder-minus-fill-16-mask { + @extend %with-mask, %folder-minus-fill-16-svg-prop; + -webkit-mask-image: var(--folder-minus-fill-16-svg); + mask-image: var(--folder-minus-fill-16-svg); +} + +%with-folder-minus-fill-24-icon { + @extend %with-icon, %folder-minus-fill-24-svg-prop; + background-image: var(--folder-minus-fill-24-svg); +} +%with-folder-minus-fill-24-mask { + @extend %with-mask, %folder-minus-fill-24-svg-prop; + -webkit-mask-image: var(--folder-minus-fill-24-svg); + mask-image: var(--folder-minus-fill-24-svg); +} + %with-folder-outline-icon { @extend %with-icon, %folder-outline-svg-prop; background-image: var(--folder-outline-svg); @@ -558,6 +3978,126 @@ mask-image: var(--folder-outline-svg); } +%with-folder-plus-16-icon { + @extend %with-icon, %folder-plus-16-svg-prop; + background-image: var(--folder-plus-16-svg); +} +%with-folder-plus-16-mask { + @extend %with-mask, %folder-plus-16-svg-prop; + -webkit-mask-image: var(--folder-plus-16-svg); + mask-image: var(--folder-plus-16-svg); +} + +%with-folder-plus-24-icon { + @extend %with-icon, %folder-plus-24-svg-prop; + background-image: var(--folder-plus-24-svg); +} +%with-folder-plus-24-mask { + @extend %with-mask, %folder-plus-24-svg-prop; + -webkit-mask-image: var(--folder-plus-24-svg); + mask-image: var(--folder-plus-24-svg); +} + +%with-folder-plus-fill-16-icon { + @extend %with-icon, %folder-plus-fill-16-svg-prop; + background-image: var(--folder-plus-fill-16-svg); +} +%with-folder-plus-fill-16-mask { + @extend %with-mask, %folder-plus-fill-16-svg-prop; + -webkit-mask-image: var(--folder-plus-fill-16-svg); + mask-image: var(--folder-plus-fill-16-svg); +} + +%with-folder-plus-fill-24-icon { + @extend %with-icon, %folder-plus-fill-24-svg-prop; + background-image: var(--folder-plus-fill-24-svg); +} +%with-folder-plus-fill-24-mask { + @extend %with-mask, %folder-plus-fill-24-svg-prop; + -webkit-mask-image: var(--folder-plus-fill-24-svg); + mask-image: var(--folder-plus-fill-24-svg); +} + +%with-folder-star-16-icon { + @extend %with-icon, %folder-star-16-svg-prop; + background-image: var(--folder-star-16-svg); +} +%with-folder-star-16-mask { + @extend %with-mask, %folder-star-16-svg-prop; + -webkit-mask-image: var(--folder-star-16-svg); + mask-image: var(--folder-star-16-svg); +} + +%with-folder-star-24-icon { + @extend %with-icon, %folder-star-24-svg-prop; + background-image: var(--folder-star-24-svg); +} +%with-folder-star-24-mask { + @extend %with-mask, %folder-star-24-svg-prop; + -webkit-mask-image: var(--folder-star-24-svg); + mask-image: var(--folder-star-24-svg); +} + +%with-folder-users-16-icon { + @extend %with-icon, %folder-users-16-svg-prop; + background-image: var(--folder-users-16-svg); +} +%with-folder-users-16-mask { + @extend %with-mask, %folder-users-16-svg-prop; + -webkit-mask-image: var(--folder-users-16-svg); + mask-image: var(--folder-users-16-svg); +} + +%with-folder-users-24-icon { + @extend %with-icon, %folder-users-24-svg-prop; + background-image: var(--folder-users-24-svg); +} +%with-folder-users-24-mask { + @extend %with-mask, %folder-users-24-svg-prop; + -webkit-mask-image: var(--folder-users-24-svg); + mask-image: var(--folder-users-24-svg); +} + +%with-frown-16-icon { + @extend %with-icon, %frown-16-svg-prop; + background-image: var(--frown-16-svg); +} +%with-frown-16-mask { + @extend %with-mask, %frown-16-svg-prop; + -webkit-mask-image: var(--frown-16-svg); + mask-image: var(--frown-16-svg); +} + +%with-frown-24-icon { + @extend %with-icon, %frown-24-svg-prop; + background-image: var(--frown-24-svg); +} +%with-frown-24-mask { + @extend %with-mask, %frown-24-svg-prop; + -webkit-mask-image: var(--frown-24-svg); + mask-image: var(--frown-24-svg); +} + +%with-gateway-16-icon { + @extend %with-icon, %gateway-16-svg-prop; + background-image: var(--gateway-16-svg); +} +%with-gateway-16-mask { + @extend %with-mask, %gateway-16-svg-prop; + -webkit-mask-image: var(--gateway-16-svg); + mask-image: var(--gateway-16-svg); +} + +%with-gateway-24-icon { + @extend %with-icon, %gateway-24-svg-prop; + background-image: var(--gateway-24-svg); +} +%with-gateway-24-mask { + @extend %with-mask, %gateway-24-svg-prop; + -webkit-mask-image: var(--gateway-24-svg); + mask-image: var(--gateway-24-svg); +} + %with-gateway-icon { @extend %with-icon, %gateway-svg-prop; background-image: var(--gateway-svg); @@ -568,6 +4108,66 @@ mask-image: var(--gateway-svg); } +%with-gcp-16-icon { + @extend %with-icon, %gcp-16-svg-prop; + background-image: var(--gcp-16-svg); +} +%with-gcp-16-mask { + @extend %with-mask, %gcp-16-svg-prop; + -webkit-mask-image: var(--gcp-16-svg); + mask-image: var(--gcp-16-svg); +} + +%with-gcp-24-icon { + @extend %with-icon, %gcp-24-svg-prop; + background-image: var(--gcp-24-svg); +} +%with-gcp-24-mask { + @extend %with-mask, %gcp-24-svg-prop; + -webkit-mask-image: var(--gcp-24-svg); + mask-image: var(--gcp-24-svg); +} + +%with-gcp-color-16-icon { + @extend %with-icon, %gcp-color-16-svg-prop; + background-image: var(--gcp-color-16-svg); +} +%with-gcp-color-16-mask { + @extend %with-mask, %gcp-color-16-svg-prop; + -webkit-mask-image: var(--gcp-color-16-svg); + mask-image: var(--gcp-color-16-svg); +} + +%with-gcp-color-24-icon { + @extend %with-icon, %gcp-color-24-svg-prop; + background-image: var(--gcp-color-24-svg); +} +%with-gcp-color-24-mask { + @extend %with-mask, %gcp-color-24-svg-prop; + -webkit-mask-image: var(--gcp-color-24-svg); + mask-image: var(--gcp-color-24-svg); +} + +%with-gift-16-icon { + @extend %with-icon, %gift-16-svg-prop; + background-image: var(--gift-16-svg); +} +%with-gift-16-mask { + @extend %with-mask, %gift-16-svg-prop; + -webkit-mask-image: var(--gift-16-svg); + mask-image: var(--gift-16-svg); +} + +%with-gift-24-icon { + @extend %with-icon, %gift-24-svg-prop; + background-image: var(--gift-24-svg); +} +%with-gift-24-mask { + @extend %with-mask, %gift-24-svg-prop; + -webkit-mask-image: var(--gift-24-svg); + mask-image: var(--gift-24-svg); +} + %with-gift-fill-icon { @extend %with-icon, %gift-fill-svg-prop; background-image: var(--gift-fill-svg); @@ -588,6 +4188,26 @@ mask-image: var(--gift-outline-svg); } +%with-git-branch-16-icon { + @extend %with-icon, %git-branch-16-svg-prop; + background-image: var(--git-branch-16-svg); +} +%with-git-branch-16-mask { + @extend %with-mask, %git-branch-16-svg-prop; + -webkit-mask-image: var(--git-branch-16-svg); + mask-image: var(--git-branch-16-svg); +} + +%with-git-branch-24-icon { + @extend %with-icon, %git-branch-24-svg-prop; + background-image: var(--git-branch-24-svg); +} +%with-git-branch-24-mask { + @extend %with-mask, %git-branch-24-svg-prop; + -webkit-mask-image: var(--git-branch-24-svg); + mask-image: var(--git-branch-24-svg); +} + %with-git-branch-icon { @extend %with-icon, %git-branch-svg-prop; background-image: var(--git-branch-svg); @@ -598,6 +4218,26 @@ mask-image: var(--git-branch-svg); } +%with-git-commit-16-icon { + @extend %with-icon, %git-commit-16-svg-prop; + background-image: var(--git-commit-16-svg); +} +%with-git-commit-16-mask { + @extend %with-mask, %git-commit-16-svg-prop; + -webkit-mask-image: var(--git-commit-16-svg); + mask-image: var(--git-commit-16-svg); +} + +%with-git-commit-24-icon { + @extend %with-icon, %git-commit-24-svg-prop; + background-image: var(--git-commit-24-svg); +} +%with-git-commit-24-mask { + @extend %with-mask, %git-commit-24-svg-prop; + -webkit-mask-image: var(--git-commit-24-svg); + mask-image: var(--git-commit-24-svg); +} + %with-git-commit-icon { @extend %with-icon, %git-commit-svg-prop; background-image: var(--git-commit-svg); @@ -608,6 +4248,46 @@ mask-image: var(--git-commit-svg); } +%with-git-merge-16-icon { + @extend %with-icon, %git-merge-16-svg-prop; + background-image: var(--git-merge-16-svg); +} +%with-git-merge-16-mask { + @extend %with-mask, %git-merge-16-svg-prop; + -webkit-mask-image: var(--git-merge-16-svg); + mask-image: var(--git-merge-16-svg); +} + +%with-git-merge-24-icon { + @extend %with-icon, %git-merge-24-svg-prop; + background-image: var(--git-merge-24-svg); +} +%with-git-merge-24-mask { + @extend %with-mask, %git-merge-24-svg-prop; + -webkit-mask-image: var(--git-merge-24-svg); + mask-image: var(--git-merge-24-svg); +} + +%with-git-pull-request-16-icon { + @extend %with-icon, %git-pull-request-16-svg-prop; + background-image: var(--git-pull-request-16-svg); +} +%with-git-pull-request-16-mask { + @extend %with-mask, %git-pull-request-16-svg-prop; + -webkit-mask-image: var(--git-pull-request-16-svg); + mask-image: var(--git-pull-request-16-svg); +} + +%with-git-pull-request-24-icon { + @extend %with-icon, %git-pull-request-24-svg-prop; + background-image: var(--git-pull-request-24-svg); +} +%with-git-pull-request-24-mask { + @extend %with-mask, %git-pull-request-24-svg-prop; + -webkit-mask-image: var(--git-pull-request-24-svg); + mask-image: var(--git-pull-request-24-svg); +} + %with-git-pull-request-icon { @extend %with-icon, %git-pull-request-svg-prop; background-image: var(--git-pull-request-svg); @@ -618,6 +4298,26 @@ mask-image: var(--git-pull-request-svg); } +%with-git-repo-16-icon { + @extend %with-icon, %git-repo-16-svg-prop; + background-image: var(--git-repo-16-svg); +} +%with-git-repo-16-mask { + @extend %with-mask, %git-repo-16-svg-prop; + -webkit-mask-image: var(--git-repo-16-svg); + mask-image: var(--git-repo-16-svg); +} + +%with-git-repo-24-icon { + @extend %with-icon, %git-repo-24-svg-prop; + background-image: var(--git-repo-24-svg); +} +%with-git-repo-24-mask { + @extend %with-mask, %git-repo-24-svg-prop; + -webkit-mask-image: var(--git-repo-24-svg); + mask-image: var(--git-repo-24-svg); +} + %with-git-repository-icon { @extend %with-icon, %git-repository-svg-prop; background-image: var(--git-repository-svg); @@ -628,6 +4328,246 @@ mask-image: var(--git-repository-svg); } +%with-github-16-icon { + @extend %with-icon, %github-16-svg-prop; + background-image: var(--github-16-svg); +} +%with-github-16-mask { + @extend %with-mask, %github-16-svg-prop; + -webkit-mask-image: var(--github-16-svg); + mask-image: var(--github-16-svg); +} + +%with-github-24-icon { + @extend %with-icon, %github-24-svg-prop; + background-image: var(--github-24-svg); +} +%with-github-24-mask { + @extend %with-mask, %github-24-svg-prop; + -webkit-mask-image: var(--github-24-svg); + mask-image: var(--github-24-svg); +} + +%with-github-color-16-icon { + @extend %with-icon, %github-color-16-svg-prop; + background-image: var(--github-color-16-svg); +} +%with-github-color-16-mask { + @extend %with-mask, %github-color-16-svg-prop; + -webkit-mask-image: var(--github-color-16-svg); + mask-image: var(--github-color-16-svg); +} + +%with-github-color-24-icon { + @extend %with-icon, %github-color-24-svg-prop; + background-image: var(--github-color-24-svg); +} +%with-github-color-24-mask { + @extend %with-mask, %github-color-24-svg-prop; + -webkit-mask-image: var(--github-color-24-svg); + mask-image: var(--github-color-24-svg); +} + +%with-gitlab-16-icon { + @extend %with-icon, %gitlab-16-svg-prop; + background-image: var(--gitlab-16-svg); +} +%with-gitlab-16-mask { + @extend %with-mask, %gitlab-16-svg-prop; + -webkit-mask-image: var(--gitlab-16-svg); + mask-image: var(--gitlab-16-svg); +} + +%with-gitlab-24-icon { + @extend %with-icon, %gitlab-24-svg-prop; + background-image: var(--gitlab-24-svg); +} +%with-gitlab-24-mask { + @extend %with-mask, %gitlab-24-svg-prop; + -webkit-mask-image: var(--gitlab-24-svg); + mask-image: var(--gitlab-24-svg); +} + +%with-gitlab-color-16-icon { + @extend %with-icon, %gitlab-color-16-svg-prop; + background-image: var(--gitlab-color-16-svg); +} +%with-gitlab-color-16-mask { + @extend %with-mask, %gitlab-color-16-svg-prop; + -webkit-mask-image: var(--gitlab-color-16-svg); + mask-image: var(--gitlab-color-16-svg); +} + +%with-gitlab-color-24-icon { + @extend %with-icon, %gitlab-color-24-svg-prop; + background-image: var(--gitlab-color-24-svg); +} +%with-gitlab-color-24-mask { + @extend %with-mask, %gitlab-color-24-svg-prop; + -webkit-mask-image: var(--gitlab-color-24-svg); + mask-image: var(--gitlab-color-24-svg); +} + +%with-globe-16-icon { + @extend %with-icon, %globe-16-svg-prop; + background-image: var(--globe-16-svg); +} +%with-globe-16-mask { + @extend %with-mask, %globe-16-svg-prop; + -webkit-mask-image: var(--globe-16-svg); + mask-image: var(--globe-16-svg); +} + +%with-globe-24-icon { + @extend %with-icon, %globe-24-svg-prop; + background-image: var(--globe-24-svg); +} +%with-globe-24-mask { + @extend %with-mask, %globe-24-svg-prop; + -webkit-mask-image: var(--globe-24-svg); + mask-image: var(--globe-24-svg); +} + +%with-globe-private-16-icon { + @extend %with-icon, %globe-private-16-svg-prop; + background-image: var(--globe-private-16-svg); +} +%with-globe-private-16-mask { + @extend %with-mask, %globe-private-16-svg-prop; + -webkit-mask-image: var(--globe-private-16-svg); + mask-image: var(--globe-private-16-svg); +} + +%with-globe-private-24-icon { + @extend %with-icon, %globe-private-24-svg-prop; + background-image: var(--globe-private-24-svg); +} +%with-globe-private-24-mask { + @extend %with-mask, %globe-private-24-svg-prop; + -webkit-mask-image: var(--globe-private-24-svg); + mask-image: var(--globe-private-24-svg); +} + +%with-google-16-icon { + @extend %with-icon, %google-16-svg-prop; + background-image: var(--google-16-svg); +} +%with-google-16-mask { + @extend %with-mask, %google-16-svg-prop; + -webkit-mask-image: var(--google-16-svg); + mask-image: var(--google-16-svg); +} + +%with-google-24-icon { + @extend %with-icon, %google-24-svg-prop; + background-image: var(--google-24-svg); +} +%with-google-24-mask { + @extend %with-mask, %google-24-svg-prop; + -webkit-mask-image: var(--google-24-svg); + mask-image: var(--google-24-svg); +} + +%with-google-color-16-icon { + @extend %with-icon, %google-color-16-svg-prop; + background-image: var(--google-color-16-svg); +} +%with-google-color-16-mask { + @extend %with-mask, %google-color-16-svg-prop; + -webkit-mask-image: var(--google-color-16-svg); + mask-image: var(--google-color-16-svg); +} + +%with-google-color-24-icon { + @extend %with-icon, %google-color-24-svg-prop; + background-image: var(--google-color-24-svg); +} +%with-google-color-24-mask { + @extend %with-mask, %google-color-24-svg-prop; + -webkit-mask-image: var(--google-color-24-svg); + mask-image: var(--google-color-24-svg); +} + +%with-grid-16-icon { + @extend %with-icon, %grid-16-svg-prop; + background-image: var(--grid-16-svg); +} +%with-grid-16-mask { + @extend %with-mask, %grid-16-svg-prop; + -webkit-mask-image: var(--grid-16-svg); + mask-image: var(--grid-16-svg); +} + +%with-grid-24-icon { + @extend %with-icon, %grid-24-svg-prop; + background-image: var(--grid-24-svg); +} +%with-grid-24-mask { + @extend %with-mask, %grid-24-svg-prop; + -webkit-mask-image: var(--grid-24-svg); + mask-image: var(--grid-24-svg); +} + +%with-grid-alt-16-icon { + @extend %with-icon, %grid-alt-16-svg-prop; + background-image: var(--grid-alt-16-svg); +} +%with-grid-alt-16-mask { + @extend %with-mask, %grid-alt-16-svg-prop; + -webkit-mask-image: var(--grid-alt-16-svg); + mask-image: var(--grid-alt-16-svg); +} + +%with-grid-alt-24-icon { + @extend %with-icon, %grid-alt-24-svg-prop; + background-image: var(--grid-alt-24-svg); +} +%with-grid-alt-24-mask { + @extend %with-mask, %grid-alt-24-svg-prop; + -webkit-mask-image: var(--grid-alt-24-svg); + mask-image: var(--grid-alt-24-svg); +} + +%with-guide-16-icon { + @extend %with-icon, %guide-16-svg-prop; + background-image: var(--guide-16-svg); +} +%with-guide-16-mask { + @extend %with-mask, %guide-16-svg-prop; + -webkit-mask-image: var(--guide-16-svg); + mask-image: var(--guide-16-svg); +} + +%with-guide-24-icon { + @extend %with-icon, %guide-24-svg-prop; + background-image: var(--guide-24-svg); +} +%with-guide-24-mask { + @extend %with-mask, %guide-24-svg-prop; + -webkit-mask-image: var(--guide-24-svg); + mask-image: var(--guide-24-svg); +} + +%with-guide-link-16-icon { + @extend %with-icon, %guide-link-16-svg-prop; + background-image: var(--guide-link-16-svg); +} +%with-guide-link-16-mask { + @extend %with-mask, %guide-link-16-svg-prop; + -webkit-mask-image: var(--guide-link-16-svg); + mask-image: var(--guide-link-16-svg); +} + +%with-guide-link-24-icon { + @extend %with-icon, %guide-link-24-svg-prop; + background-image: var(--guide-link-24-svg); +} +%with-guide-link-24-mask { + @extend %with-mask, %guide-link-24-svg-prop; + -webkit-mask-image: var(--guide-link-24-svg); + mask-image: var(--guide-link-24-svg); +} + %with-guide-icon { @extend %with-icon, %guide-svg-prop; background-image: var(--guide-svg); @@ -638,6 +4578,86 @@ mask-image: var(--guide-svg); } +%with-hammer-16-icon { + @extend %with-icon, %hammer-16-svg-prop; + background-image: var(--hammer-16-svg); +} +%with-hammer-16-mask { + @extend %with-mask, %hammer-16-svg-prop; + -webkit-mask-image: var(--hammer-16-svg); + mask-image: var(--hammer-16-svg); +} + +%with-hammer-24-icon { + @extend %with-icon, %hammer-24-svg-prop; + background-image: var(--hammer-24-svg); +} +%with-hammer-24-mask { + @extend %with-mask, %hammer-24-svg-prop; + -webkit-mask-image: var(--hammer-24-svg); + mask-image: var(--hammer-24-svg); +} + +%with-hard-drive-16-icon { + @extend %with-icon, %hard-drive-16-svg-prop; + background-image: var(--hard-drive-16-svg); +} +%with-hard-drive-16-mask { + @extend %with-mask, %hard-drive-16-svg-prop; + -webkit-mask-image: var(--hard-drive-16-svg); + mask-image: var(--hard-drive-16-svg); +} + +%with-hard-drive-24-icon { + @extend %with-icon, %hard-drive-24-svg-prop; + background-image: var(--hard-drive-24-svg); +} +%with-hard-drive-24-mask { + @extend %with-mask, %hard-drive-24-svg-prop; + -webkit-mask-image: var(--hard-drive-24-svg); + mask-image: var(--hard-drive-24-svg); +} + +%with-hash-16-icon { + @extend %with-icon, %hash-16-svg-prop; + background-image: var(--hash-16-svg); +} +%with-hash-16-mask { + @extend %with-mask, %hash-16-svg-prop; + -webkit-mask-image: var(--hash-16-svg); + mask-image: var(--hash-16-svg); +} + +%with-hash-24-icon { + @extend %with-icon, %hash-24-svg-prop; + background-image: var(--hash-24-svg); +} +%with-hash-24-mask { + @extend %with-mask, %hash-24-svg-prop; + -webkit-mask-image: var(--hash-24-svg); + mask-image: var(--hash-24-svg); +} + +%with-headphones-16-icon { + @extend %with-icon, %headphones-16-svg-prop; + background-image: var(--headphones-16-svg); +} +%with-headphones-16-mask { + @extend %with-mask, %headphones-16-svg-prop; + -webkit-mask-image: var(--headphones-16-svg); + mask-image: var(--headphones-16-svg); +} + +%with-headphones-24-icon { + @extend %with-icon, %headphones-24-svg-prop; + background-image: var(--headphones-24-svg); +} +%with-headphones-24-mask { + @extend %with-mask, %headphones-24-svg-prop; + -webkit-mask-image: var(--headphones-24-svg); + mask-image: var(--headphones-24-svg); +} + %with-health-icon { @extend %with-icon, %health-svg-prop; background-image: var(--health-svg); @@ -648,6 +4668,86 @@ mask-image: var(--health-svg); } +%with-heart-16-icon { + @extend %with-icon, %heart-16-svg-prop; + background-image: var(--heart-16-svg); +} +%with-heart-16-mask { + @extend %with-mask, %heart-16-svg-prop; + -webkit-mask-image: var(--heart-16-svg); + mask-image: var(--heart-16-svg); +} + +%with-heart-24-icon { + @extend %with-icon, %heart-24-svg-prop; + background-image: var(--heart-24-svg); +} +%with-heart-24-mask { + @extend %with-mask, %heart-24-svg-prop; + -webkit-mask-image: var(--heart-24-svg); + mask-image: var(--heart-24-svg); +} + +%with-heart-fill-16-icon { + @extend %with-icon, %heart-fill-16-svg-prop; + background-image: var(--heart-fill-16-svg); +} +%with-heart-fill-16-mask { + @extend %with-mask, %heart-fill-16-svg-prop; + -webkit-mask-image: var(--heart-fill-16-svg); + mask-image: var(--heart-fill-16-svg); +} + +%with-heart-fill-24-icon { + @extend %with-icon, %heart-fill-24-svg-prop; + background-image: var(--heart-fill-24-svg); +} +%with-heart-fill-24-mask { + @extend %with-mask, %heart-fill-24-svg-prop; + -webkit-mask-image: var(--heart-fill-24-svg); + mask-image: var(--heart-fill-24-svg); +} + +%with-heart-off-16-icon { + @extend %with-icon, %heart-off-16-svg-prop; + background-image: var(--heart-off-16-svg); +} +%with-heart-off-16-mask { + @extend %with-mask, %heart-off-16-svg-prop; + -webkit-mask-image: var(--heart-off-16-svg); + mask-image: var(--heart-off-16-svg); +} + +%with-heart-off-24-icon { + @extend %with-icon, %heart-off-24-svg-prop; + background-image: var(--heart-off-24-svg); +} +%with-heart-off-24-mask { + @extend %with-mask, %heart-off-24-svg-prop; + -webkit-mask-image: var(--heart-off-24-svg); + mask-image: var(--heart-off-24-svg); +} + +%with-help-16-icon { + @extend %with-icon, %help-16-svg-prop; + background-image: var(--help-16-svg); +} +%with-help-16-mask { + @extend %with-mask, %help-16-svg-prop; + -webkit-mask-image: var(--help-16-svg); + mask-image: var(--help-16-svg); +} + +%with-help-24-icon { + @extend %with-icon, %help-24-svg-prop; + background-image: var(--help-24-svg); +} +%with-help-24-mask { + @extend %with-mask, %help-24-svg-prop; + -webkit-mask-image: var(--help-24-svg); + mask-image: var(--help-24-svg); +} + %with-help-circle-fill-icon { @extend %with-icon, %help-circle-fill-svg-prop; background-image: var(--help-circle-fill-svg); @@ -668,6 +4768,66 @@ mask-image: var(--help-circle-outline-svg); } +%with-hexagon-16-icon { + @extend %with-icon, %hexagon-16-svg-prop; + background-image: var(--hexagon-16-svg); +} +%with-hexagon-16-mask { + @extend %with-mask, %hexagon-16-svg-prop; + -webkit-mask-image: var(--hexagon-16-svg); + mask-image: var(--hexagon-16-svg); +} + +%with-hexagon-24-icon { + @extend %with-icon, %hexagon-24-svg-prop; + background-image: var(--hexagon-24-svg); +} +%with-hexagon-24-mask { + @extend %with-mask, %hexagon-24-svg-prop; + -webkit-mask-image: var(--hexagon-24-svg); + mask-image: var(--hexagon-24-svg); +} + +%with-hexagon-fill-16-icon { + @extend %with-icon, %hexagon-fill-16-svg-prop; + background-image: var(--hexagon-fill-16-svg); +} +%with-hexagon-fill-16-mask { + @extend %with-mask, %hexagon-fill-16-svg-prop; + -webkit-mask-image: var(--hexagon-fill-16-svg); + mask-image: var(--hexagon-fill-16-svg); +} + +%with-hexagon-fill-24-icon { + @extend %with-icon, %hexagon-fill-24-svg-prop; + background-image: var(--hexagon-fill-24-svg); +} +%with-hexagon-fill-24-mask { + @extend %with-mask, %hexagon-fill-24-svg-prop; + -webkit-mask-image: var(--hexagon-fill-24-svg); + mask-image: var(--hexagon-fill-24-svg); +} + +%with-history-16-icon { + @extend %with-icon, %history-16-svg-prop; + background-image: var(--history-16-svg); +} +%with-history-16-mask { + @extend %with-mask, %history-16-svg-prop; + -webkit-mask-image: var(--history-16-svg); + mask-image: var(--history-16-svg); +} + +%with-history-24-icon { + @extend %with-icon, %history-24-svg-prop; + background-image: var(--history-24-svg); +} +%with-history-24-mask { + @extend %with-mask, %history-24-svg-prop; + -webkit-mask-image: var(--history-24-svg); + mask-image: var(--history-24-svg); +} + %with-history-icon { @extend %with-icon, %history-svg-prop; background-image: var(--history-svg); @@ -678,6 +4838,146 @@ mask-image: var(--history-svg); } +%with-home-16-icon { + @extend %with-icon, %home-16-svg-prop; + background-image: var(--home-16-svg); +} +%with-home-16-mask { + @extend %with-mask, %home-16-svg-prop; + -webkit-mask-image: var(--home-16-svg); + mask-image: var(--home-16-svg); +} + +%with-home-24-icon { + @extend %with-icon, %home-24-svg-prop; + background-image: var(--home-24-svg); +} +%with-home-24-mask { + @extend %with-mask, %home-24-svg-prop; + -webkit-mask-image: var(--home-24-svg); + mask-image: var(--home-24-svg); +} + +%with-hourglass-16-icon { + @extend %with-icon, %hourglass-16-svg-prop; + background-image: var(--hourglass-16-svg); +} +%with-hourglass-16-mask { + @extend %with-mask, %hourglass-16-svg-prop; + -webkit-mask-image: var(--hourglass-16-svg); + mask-image: var(--hourglass-16-svg); +} + +%with-hourglass-24-icon { + @extend %with-icon, %hourglass-24-svg-prop; + background-image: var(--hourglass-24-svg); +} +%with-hourglass-24-mask { + @extend %with-mask, %hourglass-24-svg-prop; + -webkit-mask-image: var(--hourglass-24-svg); + mask-image: var(--hourglass-24-svg); +} + +%with-identity-service-16-icon { + @extend %with-icon, %identity-service-16-svg-prop; + background-image: var(--identity-service-16-svg); +} +%with-identity-service-16-mask { + @extend %with-mask, %identity-service-16-svg-prop; + -webkit-mask-image: var(--identity-service-16-svg); + mask-image: var(--identity-service-16-svg); +} + +%with-identity-service-24-icon { + @extend %with-icon, %identity-service-24-svg-prop; + background-image: var(--identity-service-24-svg); +} +%with-identity-service-24-mask { + @extend %with-mask, %identity-service-24-svg-prop; + -webkit-mask-image: var(--identity-service-24-svg); + mask-image: var(--identity-service-24-svg); +} + +%with-identity-user-16-icon { + @extend %with-icon, %identity-user-16-svg-prop; + background-image: var(--identity-user-16-svg); +} +%with-identity-user-16-mask { + @extend %with-mask, %identity-user-16-svg-prop; + -webkit-mask-image: var(--identity-user-16-svg); + mask-image: var(--identity-user-16-svg); +} + +%with-identity-user-24-icon { + @extend %with-icon, %identity-user-24-svg-prop; + background-image: var(--identity-user-24-svg); +} +%with-identity-user-24-mask { + @extend %with-mask, %identity-user-24-svg-prop; + -webkit-mask-image: var(--identity-user-24-svg); + mask-image: var(--identity-user-24-svg); +} + +%with-image-16-icon { + @extend %with-icon, %image-16-svg-prop; + background-image: var(--image-16-svg); +} +%with-image-16-mask { + @extend %with-mask, %image-16-svg-prop; + -webkit-mask-image: var(--image-16-svg); + mask-image: var(--image-16-svg); +} + +%with-image-24-icon { + @extend %with-icon, %image-24-svg-prop; + background-image: var(--image-24-svg); +} +%with-image-24-mask { + @extend %with-mask, %image-24-svg-prop; + -webkit-mask-image: var(--image-24-svg); + mask-image: var(--image-24-svg); +} + +%with-inbox-16-icon { + @extend %with-icon, %inbox-16-svg-prop; + background-image: var(--inbox-16-svg); +} +%with-inbox-16-mask { + @extend %with-mask, %inbox-16-svg-prop; + -webkit-mask-image: var(--inbox-16-svg); + mask-image: var(--inbox-16-svg); +} + +%with-inbox-24-icon { + @extend %with-icon, %inbox-24-svg-prop; + background-image: var(--inbox-24-svg); +} +%with-inbox-24-mask { + @extend %with-mask, %inbox-24-svg-prop; + -webkit-mask-image: var(--inbox-24-svg); + mask-image: var(--inbox-24-svg); +} + +%with-info-16-icon { + @extend %with-icon, %info-16-svg-prop; + background-image: var(--info-16-svg); +} +%with-info-16-mask { + @extend %with-mask, %info-16-svg-prop; + -webkit-mask-image: var(--info-16-svg); + mask-image: var(--info-16-svg); +} + +%with-info-24-icon { + @extend %with-icon, %info-24-svg-prop; + background-image: var(--info-24-svg); +} +%with-info-24-mask { + @extend %with-mask, %info-24-svg-prop; + -webkit-mask-image: var(--info-24-svg); + mask-image: var(--info-24-svg); +} + %with-info-circle-fill-icon { @extend %with-icon, %info-circle-fill-svg-prop; background-image: var(--info-circle-fill-svg); @@ -698,6 +4998,66 @@ mask-image: var(--info-circle-outline-svg); } +%with-jump-link-16-icon { + @extend %with-icon, %jump-link-16-svg-prop; + background-image: var(--jump-link-16-svg); +} +%with-jump-link-16-mask { + @extend %with-mask, %jump-link-16-svg-prop; + -webkit-mask-image: var(--jump-link-16-svg); + mask-image: var(--jump-link-16-svg); +} + +%with-jump-link-24-icon { + @extend %with-icon, %jump-link-24-svg-prop; + background-image: var(--jump-link-24-svg); +} +%with-jump-link-24-mask { + @extend %with-mask, %jump-link-24-svg-prop; + -webkit-mask-image: var(--jump-link-24-svg); + mask-image: var(--jump-link-24-svg); +} + +%with-key-16-icon { + @extend %with-icon, %key-16-svg-prop; + background-image: var(--key-16-svg); +} +%with-key-16-mask { + @extend %with-mask, %key-16-svg-prop; + -webkit-mask-image: var(--key-16-svg); + mask-image: var(--key-16-svg); +} + +%with-key-24-icon { + @extend %with-icon, %key-24-svg-prop; + background-image: var(--key-24-svg); +} +%with-key-24-mask { + @extend %with-mask, %key-24-svg-prop; + -webkit-mask-image: var(--key-24-svg); + mask-image: var(--key-24-svg); +} + +%with-key-values-16-icon { + @extend %with-icon, %key-values-16-svg-prop; + background-image: var(--key-values-16-svg); +} +%with-key-values-16-mask { + @extend %with-mask, %key-values-16-svg-prop; + -webkit-mask-image: var(--key-values-16-svg); + mask-image: var(--key-values-16-svg); +} + +%with-key-values-24-icon { + @extend %with-icon, %key-values-24-svg-prop; + background-image: var(--key-values-24-svg); +} +%with-key-values-24-mask { + @extend %with-mask, %key-values-24-svg-prop; + -webkit-mask-image: var(--key-values-24-svg); + mask-image: var(--key-values-24-svg); +} + %with-key-icon { @extend %with-icon, %key-svg-prop; background-image: var(--key-svg); @@ -708,6 +5068,86 @@ mask-image: var(--key-svg); } +%with-kubernetes-16-icon { + @extend %with-icon, %kubernetes-16-svg-prop; + background-image: var(--kubernetes-16-svg); +} +%with-kubernetes-16-mask { + @extend %with-mask, %kubernetes-16-svg-prop; + -webkit-mask-image: var(--kubernetes-16-svg); + mask-image: var(--kubernetes-16-svg); +} + +%with-kubernetes-24-icon { + @extend %with-icon, %kubernetes-24-svg-prop; + background-image: var(--kubernetes-24-svg); +} +%with-kubernetes-24-mask { + @extend %with-mask, %kubernetes-24-svg-prop; + -webkit-mask-image: var(--kubernetes-24-svg); + mask-image: var(--kubernetes-24-svg); +} + +%with-kubernetes-color-16-icon { + @extend %with-icon, %kubernetes-color-16-svg-prop; + background-image: var(--kubernetes-color-16-svg); +} +%with-kubernetes-color-16-mask { + @extend %with-mask, %kubernetes-color-16-svg-prop; + -webkit-mask-image: var(--kubernetes-color-16-svg); + mask-image: var(--kubernetes-color-16-svg); +} + +%with-kubernetes-color-24-icon { + @extend %with-icon, %kubernetes-color-24-svg-prop; + background-image: var(--kubernetes-color-24-svg); +} +%with-kubernetes-color-24-mask { + @extend %with-mask, %kubernetes-color-24-svg-prop; + -webkit-mask-image: var(--kubernetes-color-24-svg); + mask-image: var(--kubernetes-color-24-svg); +} + +%with-labyrinth-16-icon { + @extend %with-icon, %labyrinth-16-svg-prop; + background-image: var(--labyrinth-16-svg); +} +%with-labyrinth-16-mask { + @extend %with-mask, %labyrinth-16-svg-prop; + -webkit-mask-image: var(--labyrinth-16-svg); + mask-image: var(--labyrinth-16-svg); +} + +%with-labyrinth-24-icon { + @extend %with-icon, %labyrinth-24-svg-prop; + background-image: var(--labyrinth-24-svg); +} +%with-labyrinth-24-mask { + @extend %with-mask, %labyrinth-24-svg-prop; + -webkit-mask-image: var(--labyrinth-24-svg); + mask-image: var(--labyrinth-24-svg); +} + +%with-layers-16-icon { + @extend %with-icon, %layers-16-svg-prop; + background-image: var(--layers-16-svg); +} +%with-layers-16-mask { + @extend %with-mask, %layers-16-svg-prop; + -webkit-mask-image: var(--layers-16-svg); + mask-image: var(--layers-16-svg); +} + +%with-layers-24-icon { + @extend %with-icon, %layers-24-svg-prop; + background-image: var(--layers-24-svg); +} +%with-layers-24-mask { + @extend %with-mask, %layers-24-svg-prop; + -webkit-mask-image: var(--layers-24-svg); + mask-image: var(--layers-24-svg); +} + %with-layers-icon { @extend %with-icon, %layers-svg-prop; background-image: var(--layers-svg); @@ -718,6 +5158,66 @@ mask-image: var(--layers-svg); } +%with-layout-16-icon { + @extend %with-icon, %layout-16-svg-prop; + background-image: var(--layout-16-svg); +} +%with-layout-16-mask { + @extend %with-mask, %layout-16-svg-prop; + -webkit-mask-image: var(--layout-16-svg); + mask-image: var(--layout-16-svg); +} + +%with-layout-24-icon { + @extend %with-icon, %layout-24-svg-prop; + background-image: var(--layout-24-svg); +} +%with-layout-24-mask { + @extend %with-mask, %layout-24-svg-prop; + -webkit-mask-image: var(--layout-24-svg); + mask-image: var(--layout-24-svg); +} + +%with-learn-16-icon { + @extend %with-icon, %learn-16-svg-prop; + background-image: var(--learn-16-svg); +} +%with-learn-16-mask { + @extend %with-mask, %learn-16-svg-prop; + -webkit-mask-image: var(--learn-16-svg); + mask-image: var(--learn-16-svg); +} + +%with-learn-24-icon { + @extend %with-icon, %learn-24-svg-prop; + background-image: var(--learn-24-svg); +} +%with-learn-24-mask { + @extend %with-mask, %learn-24-svg-prop; + -webkit-mask-image: var(--learn-24-svg); + mask-image: var(--learn-24-svg); +} + +%with-learn-link-16-icon { + @extend %with-icon, %learn-link-16-svg-prop; + background-image: var(--learn-link-16-svg); +} +%with-learn-link-16-mask { + @extend %with-mask, %learn-link-16-svg-prop; + -webkit-mask-image: var(--learn-link-16-svg); + mask-image: var(--learn-link-16-svg); +} + +%with-learn-link-24-icon { + @extend %with-icon, %learn-link-24-svg-prop; + background-image: var(--learn-link-24-svg); +} +%with-learn-link-24-mask { + @extend %with-mask, %learn-link-24-svg-prop; + -webkit-mask-image: var(--learn-link-24-svg); + mask-image: var(--learn-link-24-svg); +} + %with-learn-icon { @extend %with-icon, %learn-svg-prop; background-image: var(--learn-svg); @@ -728,6 +5228,66 @@ mask-image: var(--learn-svg); } +%with-line-chart-16-icon { + @extend %with-icon, %line-chart-16-svg-prop; + background-image: var(--line-chart-16-svg); +} +%with-line-chart-16-mask { + @extend %with-mask, %line-chart-16-svg-prop; + -webkit-mask-image: var(--line-chart-16-svg); + mask-image: var(--line-chart-16-svg); +} + +%with-line-chart-24-icon { + @extend %with-icon, %line-chart-24-svg-prop; + background-image: var(--line-chart-24-svg); +} +%with-line-chart-24-mask { + @extend %with-mask, %line-chart-24-svg-prop; + -webkit-mask-image: var(--line-chart-24-svg); + mask-image: var(--line-chart-24-svg); +} + +%with-line-chart-up-16-icon { + @extend %with-icon, %line-chart-up-16-svg-prop; + background-image: var(--line-chart-up-16-svg); +} +%with-line-chart-up-16-mask { + @extend %with-mask, %line-chart-up-16-svg-prop; + -webkit-mask-image: var(--line-chart-up-16-svg); + mask-image: var(--line-chart-up-16-svg); +} + +%with-line-chart-up-24-icon { + @extend %with-icon, %line-chart-up-24-svg-prop; + background-image: var(--line-chart-up-24-svg); +} +%with-line-chart-up-24-mask { + @extend %with-mask, %line-chart-up-24-svg-prop; + -webkit-mask-image: var(--line-chart-up-24-svg); + mask-image: var(--line-chart-up-24-svg); +} + +%with-link-16-icon { + @extend %with-icon, %link-16-svg-prop; + background-image: var(--link-16-svg); +} +%with-link-16-mask { + @extend %with-mask, %link-16-svg-prop; + -webkit-mask-image: var(--link-16-svg); + mask-image: var(--link-16-svg); +} + +%with-link-24-icon { + @extend %with-icon, %link-24-svg-prop; + background-image: var(--link-24-svg); +} +%with-link-24-mask { + @extend %with-mask, %link-24-svg-prop; + -webkit-mask-image: var(--link-24-svg); + mask-image: var(--link-24-svg); +} + %with-link-icon { @extend %with-icon, %link-svg-prop; background-image: var(--link-svg); @@ -738,6 +5298,26 @@ mask-image: var(--link-svg); } +%with-list-16-icon { + @extend %with-icon, %list-16-svg-prop; + background-image: var(--list-16-svg); +} +%with-list-16-mask { + @extend %with-mask, %list-16-svg-prop; + -webkit-mask-image: var(--list-16-svg); + mask-image: var(--list-16-svg); +} + +%with-list-24-icon { + @extend %with-icon, %list-24-svg-prop; + background-image: var(--list-24-svg); +} +%with-list-24-mask { + @extend %with-mask, %list-24-svg-prop; + -webkit-mask-image: var(--list-24-svg); + mask-image: var(--list-24-svg); +} + %with-loading-icon { @extend %with-icon, %loading-svg-prop; background-image: var(--loading-svg); @@ -748,6 +5328,26 @@ mask-image: var(--loading-svg); } +%with-lock-16-icon { + @extend %with-icon, %lock-16-svg-prop; + background-image: var(--lock-16-svg); +} +%with-lock-16-mask { + @extend %with-mask, %lock-16-svg-prop; + -webkit-mask-image: var(--lock-16-svg); + mask-image: var(--lock-16-svg); +} + +%with-lock-24-icon { + @extend %with-icon, %lock-24-svg-prop; + background-image: var(--lock-24-svg); +} +%with-lock-24-mask { + @extend %with-mask, %lock-24-svg-prop; + -webkit-mask-image: var(--lock-24-svg); + mask-image: var(--lock-24-svg); +} + %with-lock-closed-fill-icon { @extend %with-icon, %lock-closed-fill-svg-prop; background-image: var(--lock-closed-fill-svg); @@ -788,6 +5388,46 @@ mask-image: var(--lock-disabled-svg); } +%with-lock-fill-16-icon { + @extend %with-icon, %lock-fill-16-svg-prop; + background-image: var(--lock-fill-16-svg); +} +%with-lock-fill-16-mask { + @extend %with-mask, %lock-fill-16-svg-prop; + -webkit-mask-image: var(--lock-fill-16-svg); + mask-image: var(--lock-fill-16-svg); +} + +%with-lock-fill-24-icon { + @extend %with-icon, %lock-fill-24-svg-prop; + background-image: var(--lock-fill-24-svg); +} +%with-lock-fill-24-mask { + @extend %with-mask, %lock-fill-24-svg-prop; + -webkit-mask-image: var(--lock-fill-24-svg); + mask-image: var(--lock-fill-24-svg); +} + +%with-lock-off-16-icon { + @extend %with-icon, %lock-off-16-svg-prop; + background-image: var(--lock-off-16-svg); +} +%with-lock-off-16-mask { + @extend %with-mask, %lock-off-16-svg-prop; + -webkit-mask-image: var(--lock-off-16-svg); + mask-image: var(--lock-off-16-svg); +} + +%with-lock-off-24-icon { + @extend %with-icon, %lock-off-24-svg-prop; + background-image: var(--lock-off-24-svg); +} +%with-lock-off-24-mask { + @extend %with-mask, %lock-off-24-svg-prop; + -webkit-mask-image: var(--lock-off-24-svg); + mask-image: var(--lock-off-24-svg); +} + %with-lock-open-icon { @extend %with-icon, %lock-open-svg-prop; background-image: var(--lock-open-svg); @@ -1178,6 +5818,166 @@ mask-image: var(--logo-vmware-monochrome-svg); } +%with-mail-16-icon { + @extend %with-icon, %mail-16-svg-prop; + background-image: var(--mail-16-svg); +} +%with-mail-16-mask { + @extend %with-mask, %mail-16-svg-prop; + -webkit-mask-image: var(--mail-16-svg); + mask-image: var(--mail-16-svg); +} + +%with-mail-24-icon { + @extend %with-icon, %mail-24-svg-prop; + background-image: var(--mail-24-svg); +} +%with-mail-24-mask { + @extend %with-mask, %mail-24-svg-prop; + -webkit-mask-image: var(--mail-24-svg); + mask-image: var(--mail-24-svg); +} + +%with-mail-open-16-icon { + @extend %with-icon, %mail-open-16-svg-prop; + background-image: var(--mail-open-16-svg); +} +%with-mail-open-16-mask { + @extend %with-mask, %mail-open-16-svg-prop; + -webkit-mask-image: var(--mail-open-16-svg); + mask-image: var(--mail-open-16-svg); +} + +%with-mail-open-24-icon { + @extend %with-icon, %mail-open-24-svg-prop; + background-image: var(--mail-open-24-svg); +} +%with-mail-open-24-mask { + @extend %with-mask, %mail-open-24-svg-prop; + -webkit-mask-image: var(--mail-open-24-svg); + mask-image: var(--mail-open-24-svg); +} + +%with-map-16-icon { + @extend %with-icon, %map-16-svg-prop; + background-image: var(--map-16-svg); +} +%with-map-16-mask { + @extend %with-mask, %map-16-svg-prop; + -webkit-mask-image: var(--map-16-svg); + mask-image: var(--map-16-svg); +} + +%with-map-24-icon { + @extend %with-icon, %map-24-svg-prop; + background-image: var(--map-24-svg); +} +%with-map-24-mask { + @extend %with-mask, %map-24-svg-prop; + -webkit-mask-image: var(--map-24-svg); + mask-image: var(--map-24-svg); +} + +%with-map-pin-16-icon { + @extend %with-icon, %map-pin-16-svg-prop; + background-image: var(--map-pin-16-svg); +} +%with-map-pin-16-mask { + @extend %with-mask, %map-pin-16-svg-prop; + -webkit-mask-image: var(--map-pin-16-svg); + mask-image: var(--map-pin-16-svg); +} + +%with-map-pin-24-icon { + @extend %with-icon, %map-pin-24-svg-prop; + background-image: var(--map-pin-24-svg); +} +%with-map-pin-24-mask { + @extend %with-mask, %map-pin-24-svg-prop; + -webkit-mask-image: var(--map-pin-24-svg); + mask-image: var(--map-pin-24-svg); +} + +%with-maximize-16-icon { + @extend %with-icon, %maximize-16-svg-prop; + background-image: var(--maximize-16-svg); +} +%with-maximize-16-mask { + @extend %with-mask, %maximize-16-svg-prop; + -webkit-mask-image: var(--maximize-16-svg); + mask-image: var(--maximize-16-svg); +} + +%with-maximize-24-icon { + @extend %with-icon, %maximize-24-svg-prop; + background-image: var(--maximize-24-svg); +} +%with-maximize-24-mask { + @extend %with-mask, %maximize-24-svg-prop; + -webkit-mask-image: var(--maximize-24-svg); + mask-image: var(--maximize-24-svg); +} + +%with-maximize-alt-16-icon { + @extend %with-icon, %maximize-alt-16-svg-prop; + background-image: var(--maximize-alt-16-svg); +} +%with-maximize-alt-16-mask { + @extend %with-mask, %maximize-alt-16-svg-prop; + -webkit-mask-image: var(--maximize-alt-16-svg); + mask-image: var(--maximize-alt-16-svg); +} + +%with-maximize-alt-24-icon { + @extend %with-icon, %maximize-alt-24-svg-prop; + background-image: var(--maximize-alt-24-svg); +} +%with-maximize-alt-24-mask { + @extend %with-mask, %maximize-alt-24-svg-prop; + -webkit-mask-image: var(--maximize-alt-24-svg); + mask-image: var(--maximize-alt-24-svg); +} + +%with-meh-16-icon { + @extend %with-icon, %meh-16-svg-prop; + background-image: var(--meh-16-svg); +} +%with-meh-16-mask { + @extend %with-mask, %meh-16-svg-prop; + -webkit-mask-image: var(--meh-16-svg); + mask-image: var(--meh-16-svg); +} + +%with-meh-24-icon { + @extend %with-icon, %meh-24-svg-prop; + background-image: var(--meh-24-svg); +} +%with-meh-24-mask { + @extend %with-mask, %meh-24-svg-prop; + -webkit-mask-image: var(--meh-24-svg); + mask-image: var(--meh-24-svg); +} + +%with-menu-16-icon { + @extend %with-icon, %menu-16-svg-prop; + background-image: var(--menu-16-svg); +} +%with-menu-16-mask { + @extend %with-mask, %menu-16-svg-prop; + -webkit-mask-image: var(--menu-16-svg); + mask-image: var(--menu-16-svg); +} + +%with-menu-24-icon { + @extend %with-icon, %menu-24-svg-prop; + background-image: var(--menu-24-svg); +} +%with-menu-24-mask { + @extend %with-mask, %menu-24-svg-prop; + -webkit-mask-image: var(--menu-24-svg); + mask-image: var(--menu-24-svg); +} + %with-menu-icon { @extend %with-icon, %menu-svg-prop; background-image: var(--menu-svg); @@ -1188,6 +5988,26 @@ mask-image: var(--menu-svg); } +%with-mesh-16-icon { + @extend %with-icon, %mesh-16-svg-prop; + background-image: var(--mesh-16-svg); +} +%with-mesh-16-mask { + @extend %with-mask, %mesh-16-svg-prop; + -webkit-mask-image: var(--mesh-16-svg); + mask-image: var(--mesh-16-svg); +} + +%with-mesh-24-icon { + @extend %with-icon, %mesh-24-svg-prop; + background-image: var(--mesh-24-svg); +} +%with-mesh-24-mask { + @extend %with-mask, %mesh-24-svg-prop; + -webkit-mask-image: var(--mesh-24-svg); + mask-image: var(--mesh-24-svg); +} + %with-mesh-icon { @extend %with-icon, %mesh-svg-prop; background-image: var(--mesh-svg); @@ -1198,6 +6018,86 @@ mask-image: var(--mesh-svg); } +%with-message-circle-16-icon { + @extend %with-icon, %message-circle-16-svg-prop; + background-image: var(--message-circle-16-svg); +} +%with-message-circle-16-mask { + @extend %with-mask, %message-circle-16-svg-prop; + -webkit-mask-image: var(--message-circle-16-svg); + mask-image: var(--message-circle-16-svg); +} + +%with-message-circle-24-icon { + @extend %with-icon, %message-circle-24-svg-prop; + background-image: var(--message-circle-24-svg); +} +%with-message-circle-24-mask { + @extend %with-mask, %message-circle-24-svg-prop; + -webkit-mask-image: var(--message-circle-24-svg); + mask-image: var(--message-circle-24-svg); +} + +%with-message-circle-fill-16-icon { + @extend %with-icon, %message-circle-fill-16-svg-prop; + background-image: var(--message-circle-fill-16-svg); +} +%with-message-circle-fill-16-mask { + @extend %with-mask, %message-circle-fill-16-svg-prop; + -webkit-mask-image: var(--message-circle-fill-16-svg); + mask-image: var(--message-circle-fill-16-svg); +} + +%with-message-circle-fill-24-icon { + @extend %with-icon, %message-circle-fill-24-svg-prop; + background-image: var(--message-circle-fill-24-svg); +} +%with-message-circle-fill-24-mask { + @extend %with-mask, %message-circle-fill-24-svg-prop; + -webkit-mask-image: var(--message-circle-fill-24-svg); + mask-image: var(--message-circle-fill-24-svg); +} + +%with-message-square-16-icon { + @extend %with-icon, %message-square-16-svg-prop; + background-image: var(--message-square-16-svg); +} +%with-message-square-16-mask { + @extend %with-mask, %message-square-16-svg-prop; + -webkit-mask-image: var(--message-square-16-svg); + mask-image: var(--message-square-16-svg); +} + +%with-message-square-24-icon { + @extend %with-icon, %message-square-24-svg-prop; + background-image: var(--message-square-24-svg); +} +%with-message-square-24-mask { + @extend %with-mask, %message-square-24-svg-prop; + -webkit-mask-image: var(--message-square-24-svg); + mask-image: var(--message-square-24-svg); +} + +%with-message-square-fill-16-icon { + @extend %with-icon, %message-square-fill-16-svg-prop; + background-image: var(--message-square-fill-16-svg); +} +%with-message-square-fill-16-mask { + @extend %with-mask, %message-square-fill-16-svg-prop; + -webkit-mask-image: var(--message-square-fill-16-svg); + mask-image: var(--message-square-fill-16-svg); +} + +%with-message-square-fill-24-icon { + @extend %with-icon, %message-square-fill-24-svg-prop; + background-image: var(--message-square-fill-24-svg); +} +%with-message-square-fill-24-mask { + @extend %with-mask, %message-square-fill-24-svg-prop; + -webkit-mask-image: var(--message-square-fill-24-svg); + mask-image: var(--message-square-fill-24-svg); +} + %with-message-icon { @extend %with-icon, %message-svg-prop; background-image: var(--message-svg); @@ -1208,6 +6108,186 @@ mask-image: var(--message-svg); } +%with-mic-16-icon { + @extend %with-icon, %mic-16-svg-prop; + background-image: var(--mic-16-svg); +} +%with-mic-16-mask { + @extend %with-mask, %mic-16-svg-prop; + -webkit-mask-image: var(--mic-16-svg); + mask-image: var(--mic-16-svg); +} + +%with-mic-24-icon { + @extend %with-icon, %mic-24-svg-prop; + background-image: var(--mic-24-svg); +} +%with-mic-24-mask { + @extend %with-mask, %mic-24-svg-prop; + -webkit-mask-image: var(--mic-24-svg); + mask-image: var(--mic-24-svg); +} + +%with-mic-off-16-icon { + @extend %with-icon, %mic-off-16-svg-prop; + background-image: var(--mic-off-16-svg); +} +%with-mic-off-16-mask { + @extend %with-mask, %mic-off-16-svg-prop; + -webkit-mask-image: var(--mic-off-16-svg); + mask-image: var(--mic-off-16-svg); +} + +%with-mic-off-24-icon { + @extend %with-icon, %mic-off-24-svg-prop; + background-image: var(--mic-off-24-svg); +} +%with-mic-off-24-mask { + @extend %with-mask, %mic-off-24-svg-prop; + -webkit-mask-image: var(--mic-off-24-svg); + mask-image: var(--mic-off-24-svg); +} + +%with-microsoft-16-icon { + @extend %with-icon, %microsoft-16-svg-prop; + background-image: var(--microsoft-16-svg); +} +%with-microsoft-16-mask { + @extend %with-mask, %microsoft-16-svg-prop; + -webkit-mask-image: var(--microsoft-16-svg); + mask-image: var(--microsoft-16-svg); +} + +%with-microsoft-24-icon { + @extend %with-icon, %microsoft-24-svg-prop; + background-image: var(--microsoft-24-svg); +} +%with-microsoft-24-mask { + @extend %with-mask, %microsoft-24-svg-prop; + -webkit-mask-image: var(--microsoft-24-svg); + mask-image: var(--microsoft-24-svg); +} + +%with-microsoft-color-16-icon { + @extend %with-icon, %microsoft-color-16-svg-prop; + background-image: var(--microsoft-color-16-svg); +} +%with-microsoft-color-16-mask { + @extend %with-mask, %microsoft-color-16-svg-prop; + -webkit-mask-image: var(--microsoft-color-16-svg); + mask-image: var(--microsoft-color-16-svg); +} + +%with-microsoft-color-24-icon { + @extend %with-icon, %microsoft-color-24-svg-prop; + background-image: var(--microsoft-color-24-svg); +} +%with-microsoft-color-24-mask { + @extend %with-mask, %microsoft-color-24-svg-prop; + -webkit-mask-image: var(--microsoft-color-24-svg); + mask-image: var(--microsoft-color-24-svg); +} + +%with-migrate-16-icon { + @extend %with-icon, %migrate-16-svg-prop; + background-image: var(--migrate-16-svg); +} +%with-migrate-16-mask { + @extend %with-mask, %migrate-16-svg-prop; + -webkit-mask-image: var(--migrate-16-svg); + mask-image: var(--migrate-16-svg); +} + +%with-migrate-24-icon { + @extend %with-icon, %migrate-24-svg-prop; + background-image: var(--migrate-24-svg); +} +%with-migrate-24-mask { + @extend %with-mask, %migrate-24-svg-prop; + -webkit-mask-image: var(--migrate-24-svg); + mask-image: var(--migrate-24-svg); +} + +%with-minimize-16-icon { + @extend %with-icon, %minimize-16-svg-prop; + background-image: var(--minimize-16-svg); +} +%with-minimize-16-mask { + @extend %with-mask, %minimize-16-svg-prop; + -webkit-mask-image: var(--minimize-16-svg); + mask-image: var(--minimize-16-svg); +} + +%with-minimize-24-icon { + @extend %with-icon, %minimize-24-svg-prop; + background-image: var(--minimize-24-svg); +} +%with-minimize-24-mask { + @extend %with-mask, %minimize-24-svg-prop; + -webkit-mask-image: var(--minimize-24-svg); + mask-image: var(--minimize-24-svg); +} + +%with-minimize-alt-16-icon { + @extend %with-icon, %minimize-alt-16-svg-prop; + background-image: var(--minimize-alt-16-svg); +} +%with-minimize-alt-16-mask { + @extend %with-mask, %minimize-alt-16-svg-prop; + -webkit-mask-image: var(--minimize-alt-16-svg); + mask-image: var(--minimize-alt-16-svg); +} + +%with-minimize-alt-24-icon { + @extend %with-icon, %minimize-alt-24-svg-prop; + background-image: var(--minimize-alt-24-svg); +} +%with-minimize-alt-24-mask { + @extend %with-mask, %minimize-alt-24-svg-prop; + -webkit-mask-image: var(--minimize-alt-24-svg); + mask-image: var(--minimize-alt-24-svg); +} + +%with-minus-16-icon { + @extend %with-icon, %minus-16-svg-prop; + background-image: var(--minus-16-svg); +} +%with-minus-16-mask { + @extend %with-mask, %minus-16-svg-prop; + -webkit-mask-image: var(--minus-16-svg); + mask-image: var(--minus-16-svg); +} + +%with-minus-24-icon { + @extend %with-icon, %minus-24-svg-prop; + background-image: var(--minus-24-svg); +} +%with-minus-24-mask { + @extend %with-mask, %minus-24-svg-prop; + -webkit-mask-image: var(--minus-24-svg); + mask-image: var(--minus-24-svg); +} + +%with-minus-circle-16-icon { + @extend %with-icon, %minus-circle-16-svg-prop; + background-image: var(--minus-circle-16-svg); +} +%with-minus-circle-16-mask { + @extend %with-mask, %minus-circle-16-svg-prop; + -webkit-mask-image: var(--minus-circle-16-svg); + mask-image: var(--minus-circle-16-svg); +} + +%with-minus-circle-24-icon { + @extend %with-icon, %minus-circle-24-svg-prop; + background-image: var(--minus-circle-24-svg); +} +%with-minus-circle-24-mask { + @extend %with-mask, %minus-circle-24-svg-prop; + -webkit-mask-image: var(--minus-circle-24-svg); + mask-image: var(--minus-circle-24-svg); +} + %with-minus-circle-fill-icon { @extend %with-icon, %minus-circle-fill-svg-prop; background-image: var(--minus-circle-fill-svg); @@ -1238,6 +6318,86 @@ mask-image: var(--minus-plain-svg); } +%with-minus-plus-16-icon { + @extend %with-icon, %minus-plus-16-svg-prop; + background-image: var(--minus-plus-16-svg); +} +%with-minus-plus-16-mask { + @extend %with-mask, %minus-plus-16-svg-prop; + -webkit-mask-image: var(--minus-plus-16-svg); + mask-image: var(--minus-plus-16-svg); +} + +%with-minus-plus-24-icon { + @extend %with-icon, %minus-plus-24-svg-prop; + background-image: var(--minus-plus-24-svg); +} +%with-minus-plus-24-mask { + @extend %with-mask, %minus-plus-24-svg-prop; + -webkit-mask-image: var(--minus-plus-24-svg); + mask-image: var(--minus-plus-24-svg); +} + +%with-minus-plus-circle-16-icon { + @extend %with-icon, %minus-plus-circle-16-svg-prop; + background-image: var(--minus-plus-circle-16-svg); +} +%with-minus-plus-circle-16-mask { + @extend %with-mask, %minus-plus-circle-16-svg-prop; + -webkit-mask-image: var(--minus-plus-circle-16-svg); + mask-image: var(--minus-plus-circle-16-svg); +} + +%with-minus-plus-circle-24-icon { + @extend %with-icon, %minus-plus-circle-24-svg-prop; + background-image: var(--minus-plus-circle-24-svg); +} +%with-minus-plus-circle-24-mask { + @extend %with-mask, %minus-plus-circle-24-svg-prop; + -webkit-mask-image: var(--minus-plus-circle-24-svg); + mask-image: var(--minus-plus-circle-24-svg); +} + +%with-minus-plus-square-16-icon { + @extend %with-icon, %minus-plus-square-16-svg-prop; + background-image: var(--minus-plus-square-16-svg); +} +%with-minus-plus-square-16-mask { + @extend %with-mask, %minus-plus-square-16-svg-prop; + -webkit-mask-image: var(--minus-plus-square-16-svg); + mask-image: var(--minus-plus-square-16-svg); +} + +%with-minus-plus-square-24-icon { + @extend %with-icon, %minus-plus-square-24-svg-prop; + background-image: var(--minus-plus-square-24-svg); +} +%with-minus-plus-square-24-mask { + @extend %with-mask, %minus-plus-square-24-svg-prop; + -webkit-mask-image: var(--minus-plus-square-24-svg); + mask-image: var(--minus-plus-square-24-svg); +} + +%with-minus-square-16-icon { + @extend %with-icon, %minus-square-16-svg-prop; + background-image: var(--minus-square-16-svg); +} +%with-minus-square-16-mask { + @extend %with-mask, %minus-square-16-svg-prop; + -webkit-mask-image: var(--minus-square-16-svg); + mask-image: var(--minus-square-16-svg); +} + +%with-minus-square-24-icon { + @extend %with-icon, %minus-square-24-svg-prop; + background-image: var(--minus-square-24-svg); +} +%with-minus-square-24-mask { + @extend %with-mask, %minus-square-24-svg-prop; + -webkit-mask-image: var(--minus-square-24-svg); + mask-image: var(--minus-square-24-svg); +} + %with-minus-square-fill-icon { @extend %with-icon, %minus-square-fill-svg-prop; background-image: var(--minus-square-fill-svg); @@ -1248,6 +6408,26 @@ mask-image: var(--minus-square-fill-svg); } +%with-module-16-icon { + @extend %with-icon, %module-16-svg-prop; + background-image: var(--module-16-svg); +} +%with-module-16-mask { + @extend %with-mask, %module-16-svg-prop; + -webkit-mask-image: var(--module-16-svg); + mask-image: var(--module-16-svg); +} + +%with-module-24-icon { + @extend %with-icon, %module-24-svg-prop; + background-image: var(--module-24-svg); +} +%with-module-24-mask { + @extend %with-mask, %module-24-svg-prop; + -webkit-mask-image: var(--module-24-svg); + mask-image: var(--module-24-svg); +} + %with-module-icon { @extend %with-icon, %module-svg-prop; background-image: var(--module-svg); @@ -1258,6 +6438,66 @@ mask-image: var(--module-svg); } +%with-monitor-16-icon { + @extend %with-icon, %monitor-16-svg-prop; + background-image: var(--monitor-16-svg); +} +%with-monitor-16-mask { + @extend %with-mask, %monitor-16-svg-prop; + -webkit-mask-image: var(--monitor-16-svg); + mask-image: var(--monitor-16-svg); +} + +%with-monitor-24-icon { + @extend %with-icon, %monitor-24-svg-prop; + background-image: var(--monitor-24-svg); +} +%with-monitor-24-mask { + @extend %with-mask, %monitor-24-svg-prop; + -webkit-mask-image: var(--monitor-24-svg); + mask-image: var(--monitor-24-svg); +} + +%with-moon-16-icon { + @extend %with-icon, %moon-16-svg-prop; + background-image: var(--moon-16-svg); +} +%with-moon-16-mask { + @extend %with-mask, %moon-16-svg-prop; + -webkit-mask-image: var(--moon-16-svg); + mask-image: var(--moon-16-svg); +} + +%with-moon-24-icon { + @extend %with-icon, %moon-24-svg-prop; + background-image: var(--moon-24-svg); +} +%with-moon-24-mask { + @extend %with-mask, %moon-24-svg-prop; + -webkit-mask-image: var(--moon-24-svg); + mask-image: var(--moon-24-svg); +} + +%with-more-horizontal-16-icon { + @extend %with-icon, %more-horizontal-16-svg-prop; + background-image: var(--more-horizontal-16-svg); +} +%with-more-horizontal-16-mask { + @extend %with-mask, %more-horizontal-16-svg-prop; + -webkit-mask-image: var(--more-horizontal-16-svg); + mask-image: var(--more-horizontal-16-svg); +} + +%with-more-horizontal-24-icon { + @extend %with-icon, %more-horizontal-24-svg-prop; + background-image: var(--more-horizontal-24-svg); +} +%with-more-horizontal-24-mask { + @extend %with-mask, %more-horizontal-24-svg-prop; + -webkit-mask-image: var(--more-horizontal-24-svg); + mask-image: var(--more-horizontal-24-svg); +} + %with-more-horizontal-icon { @extend %with-icon, %more-horizontal-svg-prop; background-image: var(--more-horizontal-svg); @@ -1268,6 +6508,26 @@ mask-image: var(--more-horizontal-svg); } +%with-more-vertical-16-icon { + @extend %with-icon, %more-vertical-16-svg-prop; + background-image: var(--more-vertical-16-svg); +} +%with-more-vertical-16-mask { + @extend %with-mask, %more-vertical-16-svg-prop; + -webkit-mask-image: var(--more-vertical-16-svg); + mask-image: var(--more-vertical-16-svg); +} + +%with-more-vertical-24-icon { + @extend %with-icon, %more-vertical-24-svg-prop; + background-image: var(--more-vertical-24-svg); +} +%with-more-vertical-24-mask { + @extend %with-mask, %more-vertical-24-svg-prop; + -webkit-mask-image: var(--more-vertical-24-svg); + mask-image: var(--more-vertical-24-svg); +} + %with-more-vertical-icon { @extend %with-icon, %more-vertical-svg-prop; background-image: var(--more-vertical-svg); @@ -1278,6 +6538,186 @@ mask-image: var(--more-vertical-svg); } +%with-mouse-pointer-16-icon { + @extend %with-icon, %mouse-pointer-16-svg-prop; + background-image: var(--mouse-pointer-16-svg); +} +%with-mouse-pointer-16-mask { + @extend %with-mask, %mouse-pointer-16-svg-prop; + -webkit-mask-image: var(--mouse-pointer-16-svg); + mask-image: var(--mouse-pointer-16-svg); +} + +%with-mouse-pointer-24-icon { + @extend %with-icon, %mouse-pointer-24-svg-prop; + background-image: var(--mouse-pointer-24-svg); +} +%with-mouse-pointer-24-mask { + @extend %with-mask, %mouse-pointer-24-svg-prop; + -webkit-mask-image: var(--mouse-pointer-24-svg); + mask-image: var(--mouse-pointer-24-svg); +} + +%with-move-16-icon { + @extend %with-icon, %move-16-svg-prop; + background-image: var(--move-16-svg); +} +%with-move-16-mask { + @extend %with-mask, %move-16-svg-prop; + -webkit-mask-image: var(--move-16-svg); + mask-image: var(--move-16-svg); +} + +%with-move-24-icon { + @extend %with-icon, %move-24-svg-prop; + background-image: var(--move-24-svg); +} +%with-move-24-mask { + @extend %with-mask, %move-24-svg-prop; + -webkit-mask-image: var(--move-24-svg); + mask-image: var(--move-24-svg); +} + +%with-music-16-icon { + @extend %with-icon, %music-16-svg-prop; + background-image: var(--music-16-svg); +} +%with-music-16-mask { + @extend %with-mask, %music-16-svg-prop; + -webkit-mask-image: var(--music-16-svg); + mask-image: var(--music-16-svg); +} + +%with-music-24-icon { + @extend %with-icon, %music-24-svg-prop; + background-image: var(--music-24-svg); +} +%with-music-24-mask { + @extend %with-mask, %music-24-svg-prop; + -webkit-mask-image: var(--music-24-svg); + mask-image: var(--music-24-svg); +} + +%with-navigation-16-icon { + @extend %with-icon, %navigation-16-svg-prop; + background-image: var(--navigation-16-svg); +} +%with-navigation-16-mask { + @extend %with-mask, %navigation-16-svg-prop; + -webkit-mask-image: var(--navigation-16-svg); + mask-image: var(--navigation-16-svg); +} + +%with-navigation-24-icon { + @extend %with-icon, %navigation-24-svg-prop; + background-image: var(--navigation-24-svg); +} +%with-navigation-24-mask { + @extend %with-mask, %navigation-24-svg-prop; + -webkit-mask-image: var(--navigation-24-svg); + mask-image: var(--navigation-24-svg); +} + +%with-navigation-alt-16-icon { + @extend %with-icon, %navigation-alt-16-svg-prop; + background-image: var(--navigation-alt-16-svg); +} +%with-navigation-alt-16-mask { + @extend %with-mask, %navigation-alt-16-svg-prop; + -webkit-mask-image: var(--navigation-alt-16-svg); + mask-image: var(--navigation-alt-16-svg); +} + +%with-navigation-alt-24-icon { + @extend %with-icon, %navigation-alt-24-svg-prop; + background-image: var(--navigation-alt-24-svg); +} +%with-navigation-alt-24-mask { + @extend %with-mask, %navigation-alt-24-svg-prop; + -webkit-mask-image: var(--navigation-alt-24-svg); + mask-image: var(--navigation-alt-24-svg); +} + +%with-network-16-icon { + @extend %with-icon, %network-16-svg-prop; + background-image: var(--network-16-svg); +} +%with-network-16-mask { + @extend %with-mask, %network-16-svg-prop; + -webkit-mask-image: var(--network-16-svg); + mask-image: var(--network-16-svg); +} + +%with-network-24-icon { + @extend %with-icon, %network-24-svg-prop; + background-image: var(--network-24-svg); +} +%with-network-24-mask { + @extend %with-mask, %network-24-svg-prop; + -webkit-mask-image: var(--network-24-svg); + mask-image: var(--network-24-svg); +} + +%with-network-alt-16-icon { + @extend %with-icon, %network-alt-16-svg-prop; + background-image: var(--network-alt-16-svg); +} +%with-network-alt-16-mask { + @extend %with-mask, %network-alt-16-svg-prop; + -webkit-mask-image: var(--network-alt-16-svg); + mask-image: var(--network-alt-16-svg); +} + +%with-network-alt-24-icon { + @extend %with-icon, %network-alt-24-svg-prop; + background-image: var(--network-alt-24-svg); +} +%with-network-alt-24-mask { + @extend %with-mask, %network-alt-24-svg-prop; + -webkit-mask-image: var(--network-alt-24-svg); + mask-image: var(--network-alt-24-svg); +} + +%with-newspaper-16-icon { + @extend %with-icon, %newspaper-16-svg-prop; + background-image: var(--newspaper-16-svg); +} +%with-newspaper-16-mask { + @extend %with-mask, %newspaper-16-svg-prop; + -webkit-mask-image: var(--newspaper-16-svg); + mask-image: var(--newspaper-16-svg); +} + +%with-newspaper-24-icon { + @extend %with-icon, %newspaper-24-svg-prop; + background-image: var(--newspaper-24-svg); +} +%with-newspaper-24-mask { + @extend %with-mask, %newspaper-24-svg-prop; + -webkit-mask-image: var(--newspaper-24-svg); + mask-image: var(--newspaper-24-svg); +} + +%with-node-16-icon { + @extend %with-icon, %node-16-svg-prop; + background-image: var(--node-16-svg); +} +%with-node-16-mask { + @extend %with-mask, %node-16-svg-prop; + -webkit-mask-image: var(--node-16-svg); + mask-image: var(--node-16-svg); +} + +%with-node-24-icon { + @extend %with-icon, %node-24-svg-prop; + background-image: var(--node-24-svg); +} +%with-node-24-mask { + @extend %with-mask, %node-24-svg-prop; + -webkit-mask-image: var(--node-24-svg); + mask-image: var(--node-24-svg); +} + %with-notification-disabled-icon { @extend %with-icon, %notification-disabled-svg-prop; background-image: var(--notification-disabled-svg); @@ -1308,6 +6748,146 @@ mask-image: var(--notification-outline-svg); } +%with-octagon-16-icon { + @extend %with-icon, %octagon-16-svg-prop; + background-image: var(--octagon-16-svg); +} +%with-octagon-16-mask { + @extend %with-mask, %octagon-16-svg-prop; + -webkit-mask-image: var(--octagon-16-svg); + mask-image: var(--octagon-16-svg); +} + +%with-octagon-24-icon { + @extend %with-icon, %octagon-24-svg-prop; + background-image: var(--octagon-24-svg); +} +%with-octagon-24-mask { + @extend %with-mask, %octagon-24-svg-prop; + -webkit-mask-image: var(--octagon-24-svg); + mask-image: var(--octagon-24-svg); +} + +%with-okta-16-icon { + @extend %with-icon, %okta-16-svg-prop; + background-image: var(--okta-16-svg); +} +%with-okta-16-mask { + @extend %with-mask, %okta-16-svg-prop; + -webkit-mask-image: var(--okta-16-svg); + mask-image: var(--okta-16-svg); +} + +%with-okta-24-icon { + @extend %with-icon, %okta-24-svg-prop; + background-image: var(--okta-24-svg); +} +%with-okta-24-mask { + @extend %with-mask, %okta-24-svg-prop; + -webkit-mask-image: var(--okta-24-svg); + mask-image: var(--okta-24-svg); +} + +%with-okta-color-16-icon { + @extend %with-icon, %okta-color-16-svg-prop; + background-image: var(--okta-color-16-svg); +} +%with-okta-color-16-mask { + @extend %with-mask, %okta-color-16-svg-prop; + -webkit-mask-image: var(--okta-color-16-svg); + mask-image: var(--okta-color-16-svg); +} + +%with-okta-color-24-icon { + @extend %with-icon, %okta-color-24-svg-prop; + background-image: var(--okta-color-24-svg); +} +%with-okta-color-24-mask { + @extend %with-mask, %okta-color-24-svg-prop; + -webkit-mask-image: var(--okta-color-24-svg); + mask-image: var(--okta-color-24-svg); +} + +%with-oracle-16-icon { + @extend %with-icon, %oracle-16-svg-prop; + background-image: var(--oracle-16-svg); +} +%with-oracle-16-mask { + @extend %with-mask, %oracle-16-svg-prop; + -webkit-mask-image: var(--oracle-16-svg); + mask-image: var(--oracle-16-svg); +} + +%with-oracle-24-icon { + @extend %with-icon, %oracle-24-svg-prop; + background-image: var(--oracle-24-svg); +} +%with-oracle-24-mask { + @extend %with-mask, %oracle-24-svg-prop; + -webkit-mask-image: var(--oracle-24-svg); + mask-image: var(--oracle-24-svg); +} + +%with-oracle-color-16-icon { + @extend %with-icon, %oracle-color-16-svg-prop; + background-image: var(--oracle-color-16-svg); +} +%with-oracle-color-16-mask { + @extend %with-mask, %oracle-color-16-svg-prop; + -webkit-mask-image: var(--oracle-color-16-svg); + mask-image: var(--oracle-color-16-svg); +} + +%with-oracle-color-24-icon { + @extend %with-icon, %oracle-color-24-svg-prop; + background-image: var(--oracle-color-24-svg); +} +%with-oracle-color-24-mask { + @extend %with-mask, %oracle-color-24-svg-prop; + -webkit-mask-image: var(--oracle-color-24-svg); + mask-image: var(--oracle-color-24-svg); +} + +%with-org-16-icon { + @extend %with-icon, %org-16-svg-prop; + background-image: var(--org-16-svg); +} +%with-org-16-mask { + @extend %with-mask, %org-16-svg-prop; + -webkit-mask-image: var(--org-16-svg); + mask-image: var(--org-16-svg); +} + +%with-org-24-icon { + @extend %with-icon, %org-24-svg-prop; + background-image: var(--org-24-svg); +} +%with-org-24-mask { + @extend %with-mask, %org-24-svg-prop; + -webkit-mask-image: var(--org-24-svg); + mask-image: var(--org-24-svg); +} + +%with-outline-16-icon { + @extend %with-icon, %outline-16-svg-prop; + background-image: var(--outline-16-svg); +} +%with-outline-16-mask { + @extend %with-mask, %outline-16-svg-prop; + -webkit-mask-image: var(--outline-16-svg); + mask-image: var(--outline-16-svg); +} + +%with-outline-24-icon { + @extend %with-icon, %outline-24-svg-prop; + background-image: var(--outline-24-svg); +} +%with-outline-24-mask { + @extend %with-mask, %outline-24-svg-prop; + -webkit-mask-image: var(--outline-24-svg); + mask-image: var(--outline-24-svg); +} + %with-outline-icon { @extend %with-icon, %outline-svg-prop; background-image: var(--outline-svg); @@ -1318,6 +6898,26 @@ mask-image: var(--outline-svg); } +%with-package-16-icon { + @extend %with-icon, %package-16-svg-prop; + background-image: var(--package-16-svg); +} +%with-package-16-mask { + @extend %with-mask, %package-16-svg-prop; + -webkit-mask-image: var(--package-16-svg); + mask-image: var(--package-16-svg); +} + +%with-package-24-icon { + @extend %with-icon, %package-24-svg-prop; + background-image: var(--package-24-svg); +} +%with-package-24-mask { + @extend %with-mask, %package-24-svg-prop; + -webkit-mask-image: var(--package-24-svg); + mask-image: var(--package-24-svg); +} + %with-page-outline-icon { @extend %with-icon, %page-outline-svg-prop; background-image: var(--page-outline-svg); @@ -1328,6 +6928,26 @@ mask-image: var(--page-outline-svg); } +%with-paperclip-16-icon { + @extend %with-icon, %paperclip-16-svg-prop; + background-image: var(--paperclip-16-svg); +} +%with-paperclip-16-mask { + @extend %with-mask, %paperclip-16-svg-prop; + -webkit-mask-image: var(--paperclip-16-svg); + mask-image: var(--paperclip-16-svg); +} + +%with-paperclip-24-icon { + @extend %with-icon, %paperclip-24-svg-prop; + background-image: var(--paperclip-24-svg); +} +%with-paperclip-24-mask { + @extend %with-mask, %paperclip-24-svg-prop; + -webkit-mask-image: var(--paperclip-24-svg); + mask-image: var(--paperclip-24-svg); +} + %with-partner-icon { @extend %with-icon, %partner-svg-prop; background-image: var(--partner-svg); @@ -1338,6 +6958,26 @@ mask-image: var(--partner-svg); } +%with-path-16-icon { + @extend %with-icon, %path-16-svg-prop; + background-image: var(--path-16-svg); +} +%with-path-16-mask { + @extend %with-mask, %path-16-svg-prop; + -webkit-mask-image: var(--path-16-svg); + mask-image: var(--path-16-svg); +} + +%with-path-24-icon { + @extend %with-icon, %path-24-svg-prop; + background-image: var(--path-24-svg); +} +%with-path-24-mask { + @extend %with-mask, %path-24-svg-prop; + -webkit-mask-image: var(--path-24-svg); + mask-image: var(--path-24-svg); +} + %with-path-icon { @extend %with-icon, %path-svg-prop; background-image: var(--path-svg); @@ -1348,6 +6988,226 @@ mask-image: var(--path-svg); } +%with-pause-16-icon { + @extend %with-icon, %pause-16-svg-prop; + background-image: var(--pause-16-svg); +} +%with-pause-16-mask { + @extend %with-mask, %pause-16-svg-prop; + -webkit-mask-image: var(--pause-16-svg); + mask-image: var(--pause-16-svg); +} + +%with-pause-24-icon { + @extend %with-icon, %pause-24-svg-prop; + background-image: var(--pause-24-svg); +} +%with-pause-24-mask { + @extend %with-mask, %pause-24-svg-prop; + -webkit-mask-image: var(--pause-24-svg); + mask-image: var(--pause-24-svg); +} + +%with-pause-circle-16-icon { + @extend %with-icon, %pause-circle-16-svg-prop; + background-image: var(--pause-circle-16-svg); +} +%with-pause-circle-16-mask { + @extend %with-mask, %pause-circle-16-svg-prop; + -webkit-mask-image: var(--pause-circle-16-svg); + mask-image: var(--pause-circle-16-svg); +} + +%with-pause-circle-24-icon { + @extend %with-icon, %pause-circle-24-svg-prop; + background-image: var(--pause-circle-24-svg); +} +%with-pause-circle-24-mask { + @extend %with-mask, %pause-circle-24-svg-prop; + -webkit-mask-image: var(--pause-circle-24-svg); + mask-image: var(--pause-circle-24-svg); +} + +%with-pen-tool-16-icon { + @extend %with-icon, %pen-tool-16-svg-prop; + background-image: var(--pen-tool-16-svg); +} +%with-pen-tool-16-mask { + @extend %with-mask, %pen-tool-16-svg-prop; + -webkit-mask-image: var(--pen-tool-16-svg); + mask-image: var(--pen-tool-16-svg); +} + +%with-pen-tool-24-icon { + @extend %with-icon, %pen-tool-24-svg-prop; + background-image: var(--pen-tool-24-svg); +} +%with-pen-tool-24-mask { + @extend %with-mask, %pen-tool-24-svg-prop; + -webkit-mask-image: var(--pen-tool-24-svg); + mask-image: var(--pen-tool-24-svg); +} + +%with-pencil-tool-16-icon { + @extend %with-icon, %pencil-tool-16-svg-prop; + background-image: var(--pencil-tool-16-svg); +} +%with-pencil-tool-16-mask { + @extend %with-mask, %pencil-tool-16-svg-prop; + -webkit-mask-image: var(--pencil-tool-16-svg); + mask-image: var(--pencil-tool-16-svg); +} + +%with-pencil-tool-24-icon { + @extend %with-icon, %pencil-tool-24-svg-prop; + background-image: var(--pencil-tool-24-svg); +} +%with-pencil-tool-24-mask { + @extend %with-mask, %pencil-tool-24-svg-prop; + -webkit-mask-image: var(--pencil-tool-24-svg); + mask-image: var(--pencil-tool-24-svg); +} + +%with-phone-16-icon { + @extend %with-icon, %phone-16-svg-prop; + background-image: var(--phone-16-svg); +} +%with-phone-16-mask { + @extend %with-mask, %phone-16-svg-prop; + -webkit-mask-image: var(--phone-16-svg); + mask-image: var(--phone-16-svg); +} + +%with-phone-24-icon { + @extend %with-icon, %phone-24-svg-prop; + background-image: var(--phone-24-svg); +} +%with-phone-24-mask { + @extend %with-mask, %phone-24-svg-prop; + -webkit-mask-image: var(--phone-24-svg); + mask-image: var(--phone-24-svg); +} + +%with-phone-call-16-icon { + @extend %with-icon, %phone-call-16-svg-prop; + background-image: var(--phone-call-16-svg); +} +%with-phone-call-16-mask { + @extend %with-mask, %phone-call-16-svg-prop; + -webkit-mask-image: var(--phone-call-16-svg); + mask-image: var(--phone-call-16-svg); +} + +%with-phone-call-24-icon { + @extend %with-icon, %phone-call-24-svg-prop; + background-image: var(--phone-call-24-svg); +} +%with-phone-call-24-mask { + @extend %with-mask, %phone-call-24-svg-prop; + -webkit-mask-image: var(--phone-call-24-svg); + mask-image: var(--phone-call-24-svg); +} + +%with-phone-off-16-icon { + @extend %with-icon, %phone-off-16-svg-prop; + background-image: var(--phone-off-16-svg); +} +%with-phone-off-16-mask { + @extend %with-mask, %phone-off-16-svg-prop; + -webkit-mask-image: var(--phone-off-16-svg); + mask-image: var(--phone-off-16-svg); +} + +%with-phone-off-24-icon { + @extend %with-icon, %phone-off-24-svg-prop; + background-image: var(--phone-off-24-svg); +} +%with-phone-off-24-mask { + @extend %with-mask, %phone-off-24-svg-prop; + -webkit-mask-image: var(--phone-off-24-svg); + mask-image: var(--phone-off-24-svg); +} + +%with-pie-chart-16-icon { + @extend %with-icon, %pie-chart-16-svg-prop; + background-image: var(--pie-chart-16-svg); +} +%with-pie-chart-16-mask { + @extend %with-mask, %pie-chart-16-svg-prop; + -webkit-mask-image: var(--pie-chart-16-svg); + mask-image: var(--pie-chart-16-svg); +} + +%with-pie-chart-24-icon { + @extend %with-icon, %pie-chart-24-svg-prop; + background-image: var(--pie-chart-24-svg); +} +%with-pie-chart-24-mask { + @extend %with-mask, %pie-chart-24-svg-prop; + -webkit-mask-image: var(--pie-chart-24-svg); + mask-image: var(--pie-chart-24-svg); +} + +%with-pin-16-icon { + @extend %with-icon, %pin-16-svg-prop; + background-image: var(--pin-16-svg); +} +%with-pin-16-mask { + @extend %with-mask, %pin-16-svg-prop; + -webkit-mask-image: var(--pin-16-svg); + mask-image: var(--pin-16-svg); +} + +%with-pin-24-icon { + @extend %with-icon, %pin-24-svg-prop; + background-image: var(--pin-24-svg); +} +%with-pin-24-mask { + @extend %with-mask, %pin-24-svg-prop; + -webkit-mask-image: var(--pin-24-svg); + mask-image: var(--pin-24-svg); +} + +%with-play-16-icon { + @extend %with-icon, %play-16-svg-prop; + background-image: var(--play-16-svg); +} +%with-play-16-mask { + @extend %with-mask, %play-16-svg-prop; + -webkit-mask-image: var(--play-16-svg); + mask-image: var(--play-16-svg); +} + +%with-play-24-icon { + @extend %with-icon, %play-24-svg-prop; + background-image: var(--play-24-svg); +} +%with-play-24-mask { + @extend %with-mask, %play-24-svg-prop; + -webkit-mask-image: var(--play-24-svg); + mask-image: var(--play-24-svg); +} + +%with-play-circle-16-icon { + @extend %with-icon, %play-circle-16-svg-prop; + background-image: var(--play-circle-16-svg); +} +%with-play-circle-16-mask { + @extend %with-mask, %play-circle-16-svg-prop; + -webkit-mask-image: var(--play-circle-16-svg); + mask-image: var(--play-circle-16-svg); +} + +%with-play-circle-24-icon { + @extend %with-icon, %play-circle-24-svg-prop; + background-image: var(--play-circle-24-svg); +} +%with-play-circle-24-mask { + @extend %with-mask, %play-circle-24-svg-prop; + -webkit-mask-image: var(--play-circle-24-svg); + mask-image: var(--play-circle-24-svg); +} + %with-play-fill-icon { @extend %with-icon, %play-fill-svg-prop; background-image: var(--play-fill-svg); @@ -1378,6 +7238,46 @@ mask-image: var(--play-plain-svg); } +%with-plus-16-icon { + @extend %with-icon, %plus-16-svg-prop; + background-image: var(--plus-16-svg); +} +%with-plus-16-mask { + @extend %with-mask, %plus-16-svg-prop; + -webkit-mask-image: var(--plus-16-svg); + mask-image: var(--plus-16-svg); +} + +%with-plus-24-icon { + @extend %with-icon, %plus-24-svg-prop; + background-image: var(--plus-24-svg); +} +%with-plus-24-mask { + @extend %with-mask, %plus-24-svg-prop; + -webkit-mask-image: var(--plus-24-svg); + mask-image: var(--plus-24-svg); +} + +%with-plus-circle-16-icon { + @extend %with-icon, %plus-circle-16-svg-prop; + background-image: var(--plus-circle-16-svg); +} +%with-plus-circle-16-mask { + @extend %with-mask, %plus-circle-16-svg-prop; + -webkit-mask-image: var(--plus-circle-16-svg); + mask-image: var(--plus-circle-16-svg); +} + +%with-plus-circle-24-icon { + @extend %with-icon, %plus-circle-24-svg-prop; + background-image: var(--plus-circle-24-svg); +} +%with-plus-circle-24-mask { + @extend %with-mask, %plus-circle-24-svg-prop; + -webkit-mask-image: var(--plus-circle-24-svg); + mask-image: var(--plus-circle-24-svg); +} + %with-plus-circle-fill-icon { @extend %with-icon, %plus-circle-fill-svg-prop; background-image: var(--plus-circle-fill-svg); @@ -1408,6 +7308,26 @@ mask-image: var(--plus-plain-svg); } +%with-plus-square-16-icon { + @extend %with-icon, %plus-square-16-svg-prop; + background-image: var(--plus-square-16-svg); +} +%with-plus-square-16-mask { + @extend %with-mask, %plus-square-16-svg-prop; + -webkit-mask-image: var(--plus-square-16-svg); + mask-image: var(--plus-square-16-svg); +} + +%with-plus-square-24-icon { + @extend %with-icon, %plus-square-24-svg-prop; + background-image: var(--plus-square-24-svg); +} +%with-plus-square-24-mask { + @extend %with-mask, %plus-square-24-svg-prop; + -webkit-mask-image: var(--plus-square-24-svg); + mask-image: var(--plus-square-24-svg); +} + %with-plus-square-fill-icon { @extend %with-icon, %plus-square-fill-svg-prop; background-image: var(--plus-square-fill-svg); @@ -1428,6 +7348,46 @@ mask-image: var(--port-svg); } +%with-power-16-icon { + @extend %with-icon, %power-16-svg-prop; + background-image: var(--power-16-svg); +} +%with-power-16-mask { + @extend %with-mask, %power-16-svg-prop; + -webkit-mask-image: var(--power-16-svg); + mask-image: var(--power-16-svg); +} + +%with-power-24-icon { + @extend %with-icon, %power-24-svg-prop; + background-image: var(--power-24-svg); +} +%with-power-24-mask { + @extend %with-mask, %power-24-svg-prop; + -webkit-mask-image: var(--power-24-svg); + mask-image: var(--power-24-svg); +} + +%with-printer-16-icon { + @extend %with-icon, %printer-16-svg-prop; + background-image: var(--printer-16-svg); +} +%with-printer-16-mask { + @extend %with-mask, %printer-16-svg-prop; + -webkit-mask-image: var(--printer-16-svg); + mask-image: var(--printer-16-svg); +} + +%with-printer-24-icon { + @extend %with-icon, %printer-24-svg-prop; + background-image: var(--printer-24-svg); +} +%with-printer-24-mask { + @extend %with-mask, %printer-24-svg-prop; + -webkit-mask-image: var(--printer-24-svg); + mask-image: var(--printer-24-svg); +} + %with-protocol-icon { @extend %with-icon, %protocol-svg-prop; background-image: var(--protocol-svg); @@ -1438,6 +7398,26 @@ mask-image: var(--protocol-svg); } +%with-provider-16-icon { + @extend %with-icon, %provider-16-svg-prop; + background-image: var(--provider-16-svg); +} +%with-provider-16-mask { + @extend %with-mask, %provider-16-svg-prop; + -webkit-mask-image: var(--provider-16-svg); + mask-image: var(--provider-16-svg); +} + +%with-provider-24-icon { + @extend %with-icon, %provider-24-svg-prop; + background-image: var(--provider-24-svg); +} +%with-provider-24-mask { + @extend %with-mask, %provider-24-svg-prop; + -webkit-mask-image: var(--provider-24-svg); + mask-image: var(--provider-24-svg); +} + %with-provider-icon { @extend %with-icon, %provider-svg-prop; background-image: var(--provider-svg); @@ -1468,6 +7448,26 @@ mask-image: var(--public-locked-svg); } +%with-queue-16-icon { + @extend %with-icon, %queue-16-svg-prop; + background-image: var(--queue-16-svg); +} +%with-queue-16-mask { + @extend %with-mask, %queue-16-svg-prop; + -webkit-mask-image: var(--queue-16-svg); + mask-image: var(--queue-16-svg); +} + +%with-queue-24-icon { + @extend %with-icon, %queue-24-svg-prop; + background-image: var(--queue-24-svg); +} +%with-queue-24-mask { + @extend %with-mask, %queue-24-svg-prop; + -webkit-mask-image: var(--queue-24-svg); + mask-image: var(--queue-24-svg); +} + %with-queue-icon { @extend %with-icon, %queue-svg-prop; background-image: var(--queue-svg); @@ -1478,6 +7478,26 @@ mask-image: var(--queue-svg); } +%with-radio-16-icon { + @extend %with-icon, %radio-16-svg-prop; + background-image: var(--radio-16-svg); +} +%with-radio-16-mask { + @extend %with-mask, %radio-16-svg-prop; + -webkit-mask-image: var(--radio-16-svg); + mask-image: var(--radio-16-svg); +} + +%with-radio-24-icon { + @extend %with-icon, %radio-24-svg-prop; + background-image: var(--radio-24-svg); +} +%with-radio-24-mask { + @extend %with-mask, %radio-24-svg-prop; + -webkit-mask-image: var(--radio-24-svg); + mask-image: var(--radio-24-svg); +} + %with-radio-button-checked-icon { @extend %with-icon, %radio-button-checked-svg-prop; background-image: var(--radio-button-checked-svg); @@ -1498,6 +7518,26 @@ mask-image: var(--radio-button-unchecked-svg); } +%with-random-16-icon { + @extend %with-icon, %random-16-svg-prop; + background-image: var(--random-16-svg); +} +%with-random-16-mask { + @extend %with-mask, %random-16-svg-prop; + -webkit-mask-image: var(--random-16-svg); + mask-image: var(--random-16-svg); +} + +%with-random-24-icon { + @extend %with-icon, %random-24-svg-prop; + background-image: var(--random-24-svg); +} +%with-random-24-mask { + @extend %with-mask, %random-24-svg-prop; + -webkit-mask-image: var(--random-24-svg); + mask-image: var(--random-24-svg); +} + %with-random-icon { @extend %with-icon, %random-svg-prop; background-image: var(--random-svg); @@ -1508,6 +7548,26 @@ mask-image: var(--random-svg); } +%with-redirect-16-icon { + @extend %with-icon, %redirect-16-svg-prop; + background-image: var(--redirect-16-svg); +} +%with-redirect-16-mask { + @extend %with-mask, %redirect-16-svg-prop; + -webkit-mask-image: var(--redirect-16-svg); + mask-image: var(--redirect-16-svg); +} + +%with-redirect-24-icon { + @extend %with-icon, %redirect-24-svg-prop; + background-image: var(--redirect-24-svg); +} +%with-redirect-24-mask { + @extend %with-mask, %redirect-24-svg-prop; + -webkit-mask-image: var(--redirect-24-svg); + mask-image: var(--redirect-24-svg); +} + %with-redirect-icon { @extend %with-icon, %redirect-svg-prop; background-image: var(--redirect-svg); @@ -1538,6 +7598,26 @@ mask-image: var(--refresh-default-svg); } +%with-reload-16-icon { + @extend %with-icon, %reload-16-svg-prop; + background-image: var(--reload-16-svg); +} +%with-reload-16-mask { + @extend %with-mask, %reload-16-svg-prop; + -webkit-mask-image: var(--reload-16-svg); + mask-image: var(--reload-16-svg); +} + +%with-reload-24-icon { + @extend %with-icon, %reload-24-svg-prop; + background-image: var(--reload-24-svg); +} +%with-reload-24-mask { + @extend %with-mask, %reload-24-svg-prop; + -webkit-mask-image: var(--reload-24-svg); + mask-image: var(--reload-24-svg); +} + %with-remix-icon { @extend %with-icon, %remix-svg-prop; background-image: var(--remix-svg); @@ -1548,6 +7628,86 @@ mask-image: var(--remix-svg); } +%with-repeat-16-icon { + @extend %with-icon, %repeat-16-svg-prop; + background-image: var(--repeat-16-svg); +} +%with-repeat-16-mask { + @extend %with-mask, %repeat-16-svg-prop; + -webkit-mask-image: var(--repeat-16-svg); + mask-image: var(--repeat-16-svg); +} + +%with-repeat-24-icon { + @extend %with-icon, %repeat-24-svg-prop; + background-image: var(--repeat-24-svg); +} +%with-repeat-24-mask { + @extend %with-mask, %repeat-24-svg-prop; + -webkit-mask-image: var(--repeat-24-svg); + mask-image: var(--repeat-24-svg); +} + +%with-replication-direct-16-icon { + @extend %with-icon, %replication-direct-16-svg-prop; + background-image: var(--replication-direct-16-svg); +} +%with-replication-direct-16-mask { + @extend %with-mask, %replication-direct-16-svg-prop; + -webkit-mask-image: var(--replication-direct-16-svg); + mask-image: var(--replication-direct-16-svg); +} + +%with-replication-direct-24-icon { + @extend %with-icon, %replication-direct-24-svg-prop; + background-image: var(--replication-direct-24-svg); +} +%with-replication-direct-24-mask { + @extend %with-mask, %replication-direct-24-svg-prop; + -webkit-mask-image: var(--replication-direct-24-svg); + mask-image: var(--replication-direct-24-svg); +} + +%with-replication-perf-16-icon { + @extend %with-icon, %replication-perf-16-svg-prop; + background-image: var(--replication-perf-16-svg); +} +%with-replication-perf-16-mask { + @extend %with-mask, %replication-perf-16-svg-prop; + -webkit-mask-image: var(--replication-perf-16-svg); + mask-image: var(--replication-perf-16-svg); +} + +%with-replication-perf-24-icon { + @extend %with-icon, %replication-perf-24-svg-prop; + background-image: var(--replication-perf-24-svg); +} +%with-replication-perf-24-mask { + @extend %with-mask, %replication-perf-24-svg-prop; + -webkit-mask-image: var(--replication-perf-24-svg); + mask-image: var(--replication-perf-24-svg); +} + +%with-rewind-16-icon { + @extend %with-icon, %rewind-16-svg-prop; + background-image: var(--rewind-16-svg); +} +%with-rewind-16-mask { + @extend %with-mask, %rewind-16-svg-prop; + -webkit-mask-image: var(--rewind-16-svg); + mask-image: var(--rewind-16-svg); +} + +%with-rewind-24-icon { + @extend %with-icon, %rewind-24-svg-prop; + background-image: var(--rewind-24-svg); +} +%with-rewind-24-mask { + @extend %with-mask, %rewind-24-svg-prop; + -webkit-mask-image: var(--rewind-24-svg); + mask-image: var(--rewind-24-svg); +} + %with-ribbon-icon { @extend %with-icon, %ribbon-svg-prop; background-image: var(--ribbon-svg); @@ -1558,6 +7718,86 @@ mask-image: var(--ribbon-svg); } +%with-rocket-16-icon { + @extend %with-icon, %rocket-16-svg-prop; + background-image: var(--rocket-16-svg); +} +%with-rocket-16-mask { + @extend %with-mask, %rocket-16-svg-prop; + -webkit-mask-image: var(--rocket-16-svg); + mask-image: var(--rocket-16-svg); +} + +%with-rocket-24-icon { + @extend %with-icon, %rocket-24-svg-prop; + background-image: var(--rocket-24-svg); +} +%with-rocket-24-mask { + @extend %with-mask, %rocket-24-svg-prop; + -webkit-mask-image: var(--rocket-24-svg); + mask-image: var(--rocket-24-svg); +} + +%with-rotate-ccw-16-icon { + @extend %with-icon, %rotate-ccw-16-svg-prop; + background-image: var(--rotate-ccw-16-svg); +} +%with-rotate-ccw-16-mask { + @extend %with-mask, %rotate-ccw-16-svg-prop; + -webkit-mask-image: var(--rotate-ccw-16-svg); + mask-image: var(--rotate-ccw-16-svg); +} + +%with-rotate-ccw-24-icon { + @extend %with-icon, %rotate-ccw-24-svg-prop; + background-image: var(--rotate-ccw-24-svg); +} +%with-rotate-ccw-24-mask { + @extend %with-mask, %rotate-ccw-24-svg-prop; + -webkit-mask-image: var(--rotate-ccw-24-svg); + mask-image: var(--rotate-ccw-24-svg); +} + +%with-rotate-cw-16-icon { + @extend %with-icon, %rotate-cw-16-svg-prop; + background-image: var(--rotate-cw-16-svg); +} +%with-rotate-cw-16-mask { + @extend %with-mask, %rotate-cw-16-svg-prop; + -webkit-mask-image: var(--rotate-cw-16-svg); + mask-image: var(--rotate-cw-16-svg); +} + +%with-rotate-cw-24-icon { + @extend %with-icon, %rotate-cw-24-svg-prop; + background-image: var(--rotate-cw-24-svg); +} +%with-rotate-cw-24-mask { + @extend %with-mask, %rotate-cw-24-svg-prop; + -webkit-mask-image: var(--rotate-cw-24-svg); + mask-image: var(--rotate-cw-24-svg); +} + +%with-rss-16-icon { + @extend %with-icon, %rss-16-svg-prop; + background-image: var(--rss-16-svg); +} +%with-rss-16-mask { + @extend %with-mask, %rss-16-svg-prop; + -webkit-mask-image: var(--rss-16-svg); + mask-image: var(--rss-16-svg); +} + +%with-rss-24-icon { + @extend %with-icon, %rss-24-svg-prop; + background-image: var(--rss-24-svg); +} +%with-rss-24-mask { + @extend %with-mask, %rss-24-svg-prop; + -webkit-mask-image: var(--rss-24-svg); + mask-image: var(--rss-24-svg); +} + %with-run-icon { @extend %with-icon, %run-svg-prop; background-image: var(--run-svg); @@ -1568,6 +7808,66 @@ mask-image: var(--run-svg); } +%with-save-16-icon { + @extend %with-icon, %save-16-svg-prop; + background-image: var(--save-16-svg); +} +%with-save-16-mask { + @extend %with-mask, %save-16-svg-prop; + -webkit-mask-image: var(--save-16-svg); + mask-image: var(--save-16-svg); +} + +%with-save-24-icon { + @extend %with-icon, %save-24-svg-prop; + background-image: var(--save-24-svg); +} +%with-save-24-mask { + @extend %with-mask, %save-24-svg-prop; + -webkit-mask-image: var(--save-24-svg); + mask-image: var(--save-24-svg); +} + +%with-scissors-16-icon { + @extend %with-icon, %scissors-16-svg-prop; + background-image: var(--scissors-16-svg); +} +%with-scissors-16-mask { + @extend %with-mask, %scissors-16-svg-prop; + -webkit-mask-image: var(--scissors-16-svg); + mask-image: var(--scissors-16-svg); +} + +%with-scissors-24-icon { + @extend %with-icon, %scissors-24-svg-prop; + background-image: var(--scissors-24-svg); +} +%with-scissors-24-mask { + @extend %with-mask, %scissors-24-svg-prop; + -webkit-mask-image: var(--scissors-24-svg); + mask-image: var(--scissors-24-svg); +} + +%with-search-16-icon { + @extend %with-icon, %search-16-svg-prop; + background-image: var(--search-16-svg); +} +%with-search-16-mask { + @extend %with-mask, %search-16-svg-prop; + -webkit-mask-image: var(--search-16-svg); + mask-image: var(--search-16-svg); +} + +%with-search-24-icon { + @extend %with-icon, %search-24-svg-prop; + background-image: var(--search-24-svg); +} +%with-search-24-mask { + @extend %with-mask, %search-24-svg-prop; + -webkit-mask-image: var(--search-24-svg); + mask-image: var(--search-24-svg); +} + %with-search-color-icon { @extend %with-icon, %search-color-svg-prop; background-image: var(--search-color-svg); @@ -1588,6 +7888,106 @@ mask-image: var(--search-svg); } +%with-send-16-icon { + @extend %with-icon, %send-16-svg-prop; + background-image: var(--send-16-svg); +} +%with-send-16-mask { + @extend %with-mask, %send-16-svg-prop; + -webkit-mask-image: var(--send-16-svg); + mask-image: var(--send-16-svg); +} + +%with-send-24-icon { + @extend %with-icon, %send-24-svg-prop; + background-image: var(--send-24-svg); +} +%with-send-24-mask { + @extend %with-mask, %send-24-svg-prop; + -webkit-mask-image: var(--send-24-svg); + mask-image: var(--send-24-svg); +} + +%with-server-16-icon { + @extend %with-icon, %server-16-svg-prop; + background-image: var(--server-16-svg); +} +%with-server-16-mask { + @extend %with-mask, %server-16-svg-prop; + -webkit-mask-image: var(--server-16-svg); + mask-image: var(--server-16-svg); +} + +%with-server-24-icon { + @extend %with-icon, %server-24-svg-prop; + background-image: var(--server-24-svg); +} +%with-server-24-mask { + @extend %with-mask, %server-24-svg-prop; + -webkit-mask-image: var(--server-24-svg); + mask-image: var(--server-24-svg); +} + +%with-server-cluster-16-icon { + @extend %with-icon, %server-cluster-16-svg-prop; + background-image: var(--server-cluster-16-svg); +} +%with-server-cluster-16-mask { + @extend %with-mask, %server-cluster-16-svg-prop; + -webkit-mask-image: var(--server-cluster-16-svg); + mask-image: var(--server-cluster-16-svg); +} + +%with-server-cluster-24-icon { + @extend %with-icon, %server-cluster-24-svg-prop; + background-image: var(--server-cluster-24-svg); +} +%with-server-cluster-24-mask { + @extend %with-mask, %server-cluster-24-svg-prop; + -webkit-mask-image: var(--server-cluster-24-svg); + mask-image: var(--server-cluster-24-svg); +} + +%with-serverless-16-icon { + @extend %with-icon, %serverless-16-svg-prop; + background-image: var(--serverless-16-svg); +} +%with-serverless-16-mask { + @extend %with-mask, %serverless-16-svg-prop; + -webkit-mask-image: var(--serverless-16-svg); + mask-image: var(--serverless-16-svg); +} + +%with-serverless-24-icon { + @extend %with-icon, %serverless-24-svg-prop; + background-image: var(--serverless-24-svg); +} +%with-serverless-24-mask { + @extend %with-mask, %serverless-24-svg-prop; + -webkit-mask-image: var(--serverless-24-svg); + mask-image: var(--serverless-24-svg); +} + +%with-settings-16-icon { + @extend %with-icon, %settings-16-svg-prop; + background-image: var(--settings-16-svg); +} +%with-settings-16-mask { + @extend %with-mask, %settings-16-svg-prop; + -webkit-mask-image: var(--settings-16-svg); + mask-image: var(--settings-16-svg); +} + +%with-settings-24-icon { + @extend %with-icon, %settings-24-svg-prop; + background-image: var(--settings-24-svg); +} +%with-settings-24-mask { + @extend %with-mask, %settings-24-svg-prop; + -webkit-mask-image: var(--settings-24-svg); + mask-image: var(--settings-24-svg); +} + %with-settings-icon { @extend %with-icon, %settings-svg-prop; background-image: var(--settings-svg); @@ -1598,6 +7998,506 @@ mask-image: var(--settings-svg); } +%with-share-16-icon { + @extend %with-icon, %share-16-svg-prop; + background-image: var(--share-16-svg); +} +%with-share-16-mask { + @extend %with-mask, %share-16-svg-prop; + -webkit-mask-image: var(--share-16-svg); + mask-image: var(--share-16-svg); +} + +%with-share-24-icon { + @extend %with-icon, %share-24-svg-prop; + background-image: var(--share-24-svg); +} +%with-share-24-mask { + @extend %with-mask, %share-24-svg-prop; + -webkit-mask-image: var(--share-24-svg); + mask-image: var(--share-24-svg); +} + +%with-shield-16-icon { + @extend %with-icon, %shield-16-svg-prop; + background-image: var(--shield-16-svg); +} +%with-shield-16-mask { + @extend %with-mask, %shield-16-svg-prop; + -webkit-mask-image: var(--shield-16-svg); + mask-image: var(--shield-16-svg); +} + +%with-shield-24-icon { + @extend %with-icon, %shield-24-svg-prop; + background-image: var(--shield-24-svg); +} +%with-shield-24-mask { + @extend %with-mask, %shield-24-svg-prop; + -webkit-mask-image: var(--shield-24-svg); + mask-image: var(--shield-24-svg); +} + +%with-shield-alert-16-icon { + @extend %with-icon, %shield-alert-16-svg-prop; + background-image: var(--shield-alert-16-svg); +} +%with-shield-alert-16-mask { + @extend %with-mask, %shield-alert-16-svg-prop; + -webkit-mask-image: var(--shield-alert-16-svg); + mask-image: var(--shield-alert-16-svg); +} + +%with-shield-alert-24-icon { + @extend %with-icon, %shield-alert-24-svg-prop; + background-image: var(--shield-alert-24-svg); +} +%with-shield-alert-24-mask { + @extend %with-mask, %shield-alert-24-svg-prop; + -webkit-mask-image: var(--shield-alert-24-svg); + mask-image: var(--shield-alert-24-svg); +} + +%with-shield-check-16-icon { + @extend %with-icon, %shield-check-16-svg-prop; + background-image: var(--shield-check-16-svg); +} +%with-shield-check-16-mask { + @extend %with-mask, %shield-check-16-svg-prop; + -webkit-mask-image: var(--shield-check-16-svg); + mask-image: var(--shield-check-16-svg); +} + +%with-shield-check-24-icon { + @extend %with-icon, %shield-check-24-svg-prop; + background-image: var(--shield-check-24-svg); +} +%with-shield-check-24-mask { + @extend %with-mask, %shield-check-24-svg-prop; + -webkit-mask-image: var(--shield-check-24-svg); + mask-image: var(--shield-check-24-svg); +} + +%with-shield-off-16-icon { + @extend %with-icon, %shield-off-16-svg-prop; + background-image: var(--shield-off-16-svg); +} +%with-shield-off-16-mask { + @extend %with-mask, %shield-off-16-svg-prop; + -webkit-mask-image: var(--shield-off-16-svg); + mask-image: var(--shield-off-16-svg); +} + +%with-shield-off-24-icon { + @extend %with-icon, %shield-off-24-svg-prop; + background-image: var(--shield-off-24-svg); +} +%with-shield-off-24-mask { + @extend %with-mask, %shield-off-24-svg-prop; + -webkit-mask-image: var(--shield-off-24-svg); + mask-image: var(--shield-off-24-svg); +} + +%with-shield-x-16-icon { + @extend %with-icon, %shield-x-16-svg-prop; + background-image: var(--shield-x-16-svg); +} +%with-shield-x-16-mask { + @extend %with-mask, %shield-x-16-svg-prop; + -webkit-mask-image: var(--shield-x-16-svg); + mask-image: var(--shield-x-16-svg); +} + +%with-shield-x-24-icon { + @extend %with-icon, %shield-x-24-svg-prop; + background-image: var(--shield-x-24-svg); +} +%with-shield-x-24-mask { + @extend %with-mask, %shield-x-24-svg-prop; + -webkit-mask-image: var(--shield-x-24-svg); + mask-image: var(--shield-x-24-svg); +} + +%with-shopping-bag-16-icon { + @extend %with-icon, %shopping-bag-16-svg-prop; + background-image: var(--shopping-bag-16-svg); +} +%with-shopping-bag-16-mask { + @extend %with-mask, %shopping-bag-16-svg-prop; + -webkit-mask-image: var(--shopping-bag-16-svg); + mask-image: var(--shopping-bag-16-svg); +} + +%with-shopping-bag-24-icon { + @extend %with-icon, %shopping-bag-24-svg-prop; + background-image: var(--shopping-bag-24-svg); +} +%with-shopping-bag-24-mask { + @extend %with-mask, %shopping-bag-24-svg-prop; + -webkit-mask-image: var(--shopping-bag-24-svg); + mask-image: var(--shopping-bag-24-svg); +} + +%with-shopping-cart-16-icon { + @extend %with-icon, %shopping-cart-16-svg-prop; + background-image: var(--shopping-cart-16-svg); +} +%with-shopping-cart-16-mask { + @extend %with-mask, %shopping-cart-16-svg-prop; + -webkit-mask-image: var(--shopping-cart-16-svg); + mask-image: var(--shopping-cart-16-svg); +} + +%with-shopping-cart-24-icon { + @extend %with-icon, %shopping-cart-24-svg-prop; + background-image: var(--shopping-cart-24-svg); +} +%with-shopping-cart-24-mask { + @extend %with-mask, %shopping-cart-24-svg-prop; + -webkit-mask-image: var(--shopping-cart-24-svg); + mask-image: var(--shopping-cart-24-svg); +} + +%with-shuffle-16-icon { + @extend %with-icon, %shuffle-16-svg-prop; + background-image: var(--shuffle-16-svg); +} +%with-shuffle-16-mask { + @extend %with-mask, %shuffle-16-svg-prop; + -webkit-mask-image: var(--shuffle-16-svg); + mask-image: var(--shuffle-16-svg); +} + +%with-shuffle-24-icon { + @extend %with-icon, %shuffle-24-svg-prop; + background-image: var(--shuffle-24-svg); +} +%with-shuffle-24-mask { + @extend %with-mask, %shuffle-24-svg-prop; + -webkit-mask-image: var(--shuffle-24-svg); + mask-image: var(--shuffle-24-svg); +} + +%with-sidebar-16-icon { + @extend %with-icon, %sidebar-16-svg-prop; + background-image: var(--sidebar-16-svg); +} +%with-sidebar-16-mask { + @extend %with-mask, %sidebar-16-svg-prop; + -webkit-mask-image: var(--sidebar-16-svg); + mask-image: var(--sidebar-16-svg); +} + +%with-sidebar-24-icon { + @extend %with-icon, %sidebar-24-svg-prop; + background-image: var(--sidebar-24-svg); +} +%with-sidebar-24-mask { + @extend %with-mask, %sidebar-24-svg-prop; + -webkit-mask-image: var(--sidebar-24-svg); + mask-image: var(--sidebar-24-svg); +} + +%with-sidebar-hide-16-icon { + @extend %with-icon, %sidebar-hide-16-svg-prop; + background-image: var(--sidebar-hide-16-svg); +} +%with-sidebar-hide-16-mask { + @extend %with-mask, %sidebar-hide-16-svg-prop; + -webkit-mask-image: var(--sidebar-hide-16-svg); + mask-image: var(--sidebar-hide-16-svg); +} + +%with-sidebar-hide-24-icon { + @extend %with-icon, %sidebar-hide-24-svg-prop; + background-image: var(--sidebar-hide-24-svg); +} +%with-sidebar-hide-24-mask { + @extend %with-mask, %sidebar-hide-24-svg-prop; + -webkit-mask-image: var(--sidebar-hide-24-svg); + mask-image: var(--sidebar-hide-24-svg); +} + +%with-sidebar-show-16-icon { + @extend %with-icon, %sidebar-show-16-svg-prop; + background-image: var(--sidebar-show-16-svg); +} +%with-sidebar-show-16-mask { + @extend %with-mask, %sidebar-show-16-svg-prop; + -webkit-mask-image: var(--sidebar-show-16-svg); + mask-image: var(--sidebar-show-16-svg); +} + +%with-sidebar-show-24-icon { + @extend %with-icon, %sidebar-show-24-svg-prop; + background-image: var(--sidebar-show-24-svg); +} +%with-sidebar-show-24-mask { + @extend %with-mask, %sidebar-show-24-svg-prop; + -webkit-mask-image: var(--sidebar-show-24-svg); + mask-image: var(--sidebar-show-24-svg); +} + +%with-sign-in-16-icon { + @extend %with-icon, %sign-in-16-svg-prop; + background-image: var(--sign-in-16-svg); +} +%with-sign-in-16-mask { + @extend %with-mask, %sign-in-16-svg-prop; + -webkit-mask-image: var(--sign-in-16-svg); + mask-image: var(--sign-in-16-svg); +} + +%with-sign-in-24-icon { + @extend %with-icon, %sign-in-24-svg-prop; + background-image: var(--sign-in-24-svg); +} +%with-sign-in-24-mask { + @extend %with-mask, %sign-in-24-svg-prop; + -webkit-mask-image: var(--sign-in-24-svg); + mask-image: var(--sign-in-24-svg); +} + +%with-sign-out-16-icon { + @extend %with-icon, %sign-out-16-svg-prop; + background-image: var(--sign-out-16-svg); +} +%with-sign-out-16-mask { + @extend %with-mask, %sign-out-16-svg-prop; + -webkit-mask-image: var(--sign-out-16-svg); + mask-image: var(--sign-out-16-svg); +} + +%with-sign-out-24-icon { + @extend %with-icon, %sign-out-24-svg-prop; + background-image: var(--sign-out-24-svg); +} +%with-sign-out-24-mask { + @extend %with-mask, %sign-out-24-svg-prop; + -webkit-mask-image: var(--sign-out-24-svg); + mask-image: var(--sign-out-24-svg); +} + +%with-skip-16-icon { + @extend %with-icon, %skip-16-svg-prop; + background-image: var(--skip-16-svg); +} +%with-skip-16-mask { + @extend %with-mask, %skip-16-svg-prop; + -webkit-mask-image: var(--skip-16-svg); + mask-image: var(--skip-16-svg); +} + +%with-skip-24-icon { + @extend %with-icon, %skip-24-svg-prop; + background-image: var(--skip-24-svg); +} +%with-skip-24-mask { + @extend %with-mask, %skip-24-svg-prop; + -webkit-mask-image: var(--skip-24-svg); + mask-image: var(--skip-24-svg); +} + +%with-skip-back-16-icon { + @extend %with-icon, %skip-back-16-svg-prop; + background-image: var(--skip-back-16-svg); +} +%with-skip-back-16-mask { + @extend %with-mask, %skip-back-16-svg-prop; + -webkit-mask-image: var(--skip-back-16-svg); + mask-image: var(--skip-back-16-svg); +} + +%with-skip-back-24-icon { + @extend %with-icon, %skip-back-24-svg-prop; + background-image: var(--skip-back-24-svg); +} +%with-skip-back-24-mask { + @extend %with-mask, %skip-back-24-svg-prop; + -webkit-mask-image: var(--skip-back-24-svg); + mask-image: var(--skip-back-24-svg); +} + +%with-skip-forward-16-icon { + @extend %with-icon, %skip-forward-16-svg-prop; + background-image: var(--skip-forward-16-svg); +} +%with-skip-forward-16-mask { + @extend %with-mask, %skip-forward-16-svg-prop; + -webkit-mask-image: var(--skip-forward-16-svg); + mask-image: var(--skip-forward-16-svg); +} + +%with-skip-forward-24-icon { + @extend %with-icon, %skip-forward-24-svg-prop; + background-image: var(--skip-forward-24-svg); +} +%with-skip-forward-24-mask { + @extend %with-mask, %skip-forward-24-svg-prop; + -webkit-mask-image: var(--skip-forward-24-svg); + mask-image: var(--skip-forward-24-svg); +} + +%with-slack-16-icon { + @extend %with-icon, %slack-16-svg-prop; + background-image: var(--slack-16-svg); +} +%with-slack-16-mask { + @extend %with-mask, %slack-16-svg-prop; + -webkit-mask-image: var(--slack-16-svg); + mask-image: var(--slack-16-svg); +} + +%with-slack-24-icon { + @extend %with-icon, %slack-24-svg-prop; + background-image: var(--slack-24-svg); +} +%with-slack-24-mask { + @extend %with-mask, %slack-24-svg-prop; + -webkit-mask-image: var(--slack-24-svg); + mask-image: var(--slack-24-svg); +} + +%with-slack-color-16-icon { + @extend %with-icon, %slack-color-16-svg-prop; + background-image: var(--slack-color-16-svg); +} +%with-slack-color-16-mask { + @extend %with-mask, %slack-color-16-svg-prop; + -webkit-mask-image: var(--slack-color-16-svg); + mask-image: var(--slack-color-16-svg); +} + +%with-slack-color-24-icon { + @extend %with-icon, %slack-color-24-svg-prop; + background-image: var(--slack-color-24-svg); +} +%with-slack-color-24-mask { + @extend %with-mask, %slack-color-24-svg-prop; + -webkit-mask-image: var(--slack-color-24-svg); + mask-image: var(--slack-color-24-svg); +} + +%with-slash-16-icon { + @extend %with-icon, %slash-16-svg-prop; + background-image: var(--slash-16-svg); +} +%with-slash-16-mask { + @extend %with-mask, %slash-16-svg-prop; + -webkit-mask-image: var(--slash-16-svg); + mask-image: var(--slash-16-svg); +} + +%with-slash-24-icon { + @extend %with-icon, %slash-24-svg-prop; + background-image: var(--slash-24-svg); +} +%with-slash-24-mask { + @extend %with-mask, %slash-24-svg-prop; + -webkit-mask-image: var(--slash-24-svg); + mask-image: var(--slash-24-svg); +} + +%with-slash-square-16-icon { + @extend %with-icon, %slash-square-16-svg-prop; + background-image: var(--slash-square-16-svg); +} +%with-slash-square-16-mask { + @extend %with-mask, %slash-square-16-svg-prop; + -webkit-mask-image: var(--slash-square-16-svg); + mask-image: var(--slash-square-16-svg); +} + +%with-slash-square-24-icon { + @extend %with-icon, %slash-square-24-svg-prop; + background-image: var(--slash-square-24-svg); +} +%with-slash-square-24-mask { + @extend %with-mask, %slash-square-24-svg-prop; + -webkit-mask-image: var(--slash-square-24-svg); + mask-image: var(--slash-square-24-svg); +} + +%with-sliders-16-icon { + @extend %with-icon, %sliders-16-svg-prop; + background-image: var(--sliders-16-svg); +} +%with-sliders-16-mask { + @extend %with-mask, %sliders-16-svg-prop; + -webkit-mask-image: var(--sliders-16-svg); + mask-image: var(--sliders-16-svg); +} + +%with-sliders-24-icon { + @extend %with-icon, %sliders-24-svg-prop; + background-image: var(--sliders-24-svg); +} +%with-sliders-24-mask { + @extend %with-mask, %sliders-24-svg-prop; + -webkit-mask-image: var(--sliders-24-svg); + mask-image: var(--sliders-24-svg); +} + +%with-smartphone-16-icon { + @extend %with-icon, %smartphone-16-svg-prop; + background-image: var(--smartphone-16-svg); +} +%with-smartphone-16-mask { + @extend %with-mask, %smartphone-16-svg-prop; + -webkit-mask-image: var(--smartphone-16-svg); + mask-image: var(--smartphone-16-svg); +} + +%with-smartphone-24-icon { + @extend %with-icon, %smartphone-24-svg-prop; + background-image: var(--smartphone-24-svg); +} +%with-smartphone-24-mask { + @extend %with-mask, %smartphone-24-svg-prop; + -webkit-mask-image: var(--smartphone-24-svg); + mask-image: var(--smartphone-24-svg); +} + +%with-smile-16-icon { + @extend %with-icon, %smile-16-svg-prop; + background-image: var(--smile-16-svg); +} +%with-smile-16-mask { + @extend %with-mask, %smile-16-svg-prop; + -webkit-mask-image: var(--smile-16-svg); + mask-image: var(--smile-16-svg); +} + +%with-smile-24-icon { + @extend %with-icon, %smile-24-svg-prop; + background-image: var(--smile-24-svg); +} +%with-smile-24-mask { + @extend %with-mask, %smile-24-svg-prop; + -webkit-mask-image: var(--smile-24-svg); + mask-image: var(--smile-24-svg); +} + +%with-socket-16-icon { + @extend %with-icon, %socket-16-svg-prop; + background-image: var(--socket-16-svg); +} +%with-socket-16-mask { + @extend %with-mask, %socket-16-svg-prop; + -webkit-mask-image: var(--socket-16-svg); + mask-image: var(--socket-16-svg); +} + +%with-socket-24-icon { + @extend %with-icon, %socket-24-svg-prop; + background-image: var(--socket-24-svg); +} +%with-socket-24-mask { + @extend %with-mask, %socket-24-svg-prop; + -webkit-mask-image: var(--socket-24-svg); + mask-image: var(--socket-24-svg); +} + %with-socket-icon { @extend %with-icon, %socket-svg-prop; background-image: var(--socket-svg); @@ -1608,6 +8508,46 @@ mask-image: var(--socket-svg); } +%with-sort-asc-16-icon { + @extend %with-icon, %sort-asc-16-svg-prop; + background-image: var(--sort-asc-16-svg); +} +%with-sort-asc-16-mask { + @extend %with-mask, %sort-asc-16-svg-prop; + -webkit-mask-image: var(--sort-asc-16-svg); + mask-image: var(--sort-asc-16-svg); +} + +%with-sort-asc-24-icon { + @extend %with-icon, %sort-asc-24-svg-prop; + background-image: var(--sort-asc-24-svg); +} +%with-sort-asc-24-mask { + @extend %with-mask, %sort-asc-24-svg-prop; + -webkit-mask-image: var(--sort-asc-24-svg); + mask-image: var(--sort-asc-24-svg); +} + +%with-sort-desc-16-icon { + @extend %with-icon, %sort-desc-16-svg-prop; + background-image: var(--sort-desc-16-svg); +} +%with-sort-desc-16-mask { + @extend %with-mask, %sort-desc-16-svg-prop; + -webkit-mask-image: var(--sort-desc-16-svg); + mask-image: var(--sort-desc-16-svg); +} + +%with-sort-desc-24-icon { + @extend %with-icon, %sort-desc-24-svg-prop; + background-image: var(--sort-desc-24-svg); +} +%with-sort-desc-24-mask { + @extend %with-mask, %sort-desc-24-svg-prop; + -webkit-mask-image: var(--sort-desc-24-svg); + mask-image: var(--sort-desc-24-svg); +} + %with-sort-icon { @extend %with-icon, %sort-svg-prop; background-image: var(--sort-svg); @@ -1628,6 +8568,126 @@ mask-image: var(--source-file-svg); } +%with-speaker-16-icon { + @extend %with-icon, %speaker-16-svg-prop; + background-image: var(--speaker-16-svg); +} +%with-speaker-16-mask { + @extend %with-mask, %speaker-16-svg-prop; + -webkit-mask-image: var(--speaker-16-svg); + mask-image: var(--speaker-16-svg); +} + +%with-speaker-24-icon { + @extend %with-icon, %speaker-24-svg-prop; + background-image: var(--speaker-24-svg); +} +%with-speaker-24-mask { + @extend %with-mask, %speaker-24-svg-prop; + -webkit-mask-image: var(--speaker-24-svg); + mask-image: var(--speaker-24-svg); +} + +%with-square-16-icon { + @extend %with-icon, %square-16-svg-prop; + background-image: var(--square-16-svg); +} +%with-square-16-mask { + @extend %with-mask, %square-16-svg-prop; + -webkit-mask-image: var(--square-16-svg); + mask-image: var(--square-16-svg); +} + +%with-square-24-icon { + @extend %with-icon, %square-24-svg-prop; + background-image: var(--square-24-svg); +} +%with-square-24-mask { + @extend %with-mask, %square-24-svg-prop; + -webkit-mask-image: var(--square-24-svg); + mask-image: var(--square-24-svg); +} + +%with-square-fill-16-icon { + @extend %with-icon, %square-fill-16-svg-prop; + background-image: var(--square-fill-16-svg); +} +%with-square-fill-16-mask { + @extend %with-mask, %square-fill-16-svg-prop; + -webkit-mask-image: var(--square-fill-16-svg); + mask-image: var(--square-fill-16-svg); +} + +%with-square-fill-24-icon { + @extend %with-icon, %square-fill-24-svg-prop; + background-image: var(--square-fill-24-svg); +} +%with-square-fill-24-mask { + @extend %with-mask, %square-fill-24-svg-prop; + -webkit-mask-image: var(--square-fill-24-svg); + mask-image: var(--square-fill-24-svg); +} + +%with-star-16-icon { + @extend %with-icon, %star-16-svg-prop; + background-image: var(--star-16-svg); +} +%with-star-16-mask { + @extend %with-mask, %star-16-svg-prop; + -webkit-mask-image: var(--star-16-svg); + mask-image: var(--star-16-svg); +} + +%with-star-24-icon { + @extend %with-icon, %star-24-svg-prop; + background-image: var(--star-24-svg); +} +%with-star-24-mask { + @extend %with-mask, %star-24-svg-prop; + -webkit-mask-image: var(--star-24-svg); + mask-image: var(--star-24-svg); +} + +%with-star-circle-16-icon { + @extend %with-icon, %star-circle-16-svg-prop; + background-image: var(--star-circle-16-svg); +} +%with-star-circle-16-mask { + @extend %with-mask, %star-circle-16-svg-prop; + -webkit-mask-image: var(--star-circle-16-svg); + mask-image: var(--star-circle-16-svg); +} + +%with-star-circle-24-icon { + @extend %with-icon, %star-circle-24-svg-prop; + background-image: var(--star-circle-24-svg); +} +%with-star-circle-24-mask { + @extend %with-mask, %star-circle-24-svg-prop; + -webkit-mask-image: var(--star-circle-24-svg); + mask-image: var(--star-circle-24-svg); +} + +%with-star-fill-16-icon { + @extend %with-icon, %star-fill-16-svg-prop; + background-image: var(--star-fill-16-svg); +} +%with-star-fill-16-mask { + @extend %with-mask, %star-fill-16-svg-prop; + -webkit-mask-image: var(--star-fill-16-svg); + mask-image: var(--star-fill-16-svg); +} + +%with-star-fill-24-icon { + @extend %with-icon, %star-fill-24-svg-prop; + background-image: var(--star-fill-24-svg); +} +%with-star-fill-24-mask { + @extend %with-mask, %star-fill-24-svg-prop; + -webkit-mask-image: var(--star-fill-24-svg); + mask-image: var(--star-fill-24-svg); +} + %with-star-fill-icon { @extend %with-icon, %star-fill-svg-prop; background-image: var(--star-fill-svg); @@ -1638,6 +8698,26 @@ mask-image: var(--star-fill-svg); } +%with-star-off-16-icon { + @extend %with-icon, %star-off-16-svg-prop; + background-image: var(--star-off-16-svg); +} +%with-star-off-16-mask { + @extend %with-mask, %star-off-16-svg-prop; + -webkit-mask-image: var(--star-off-16-svg); + mask-image: var(--star-off-16-svg); +} + +%with-star-off-24-icon { + @extend %with-icon, %star-off-24-svg-prop; + background-image: var(--star-off-24-svg); +} +%with-star-off-24-mask { + @extend %with-mask, %star-off-24-svg-prop; + -webkit-mask-image: var(--star-off-24-svg); + mask-image: var(--star-off-24-svg); +} + %with-star-outline-icon { @extend %with-icon, %star-outline-svg-prop; background-image: var(--star-outline-svg); @@ -1648,6 +8728,26 @@ mask-image: var(--star-outline-svg); } +%with-stop-circle-16-icon { + @extend %with-icon, %stop-circle-16-svg-prop; + background-image: var(--stop-circle-16-svg); +} +%with-stop-circle-16-mask { + @extend %with-mask, %stop-circle-16-svg-prop; + -webkit-mask-image: var(--stop-circle-16-svg); + mask-image: var(--stop-circle-16-svg); +} + +%with-stop-circle-24-icon { + @extend %with-icon, %stop-circle-24-svg-prop; + background-image: var(--stop-circle-24-svg); +} +%with-stop-circle-24-mask { + @extend %with-mask, %stop-circle-24-svg-prop; + -webkit-mask-image: var(--stop-circle-24-svg); + mask-image: var(--stop-circle-24-svg); +} + %with-sub-left-icon { @extend %with-icon, %sub-left-svg-prop; background-image: var(--sub-left-svg); @@ -1668,6 +8768,46 @@ mask-image: var(--sub-right-svg); } +%with-sun-16-icon { + @extend %with-icon, %sun-16-svg-prop; + background-image: var(--sun-16-svg); +} +%with-sun-16-mask { + @extend %with-mask, %sun-16-svg-prop; + -webkit-mask-image: var(--sun-16-svg); + mask-image: var(--sun-16-svg); +} + +%with-sun-24-icon { + @extend %with-icon, %sun-24-svg-prop; + background-image: var(--sun-24-svg); +} +%with-sun-24-mask { + @extend %with-mask, %sun-24-svg-prop; + -webkit-mask-image: var(--sun-24-svg); + mask-image: var(--sun-24-svg); +} + +%with-support-16-icon { + @extend %with-icon, %support-16-svg-prop; + background-image: var(--support-16-svg); +} +%with-support-16-mask { + @extend %with-mask, %support-16-svg-prop; + -webkit-mask-image: var(--support-16-svg); + mask-image: var(--support-16-svg); +} + +%with-support-24-icon { + @extend %with-icon, %support-24-svg-prop; + background-image: var(--support-24-svg); +} +%with-support-24-mask { + @extend %with-mask, %support-24-svg-prop; + -webkit-mask-image: var(--support-24-svg); + mask-image: var(--support-24-svg); +} + %with-support-icon { @extend %with-icon, %support-svg-prop; background-image: var(--support-svg); @@ -1678,6 +8818,26 @@ mask-image: var(--support-svg); } +%with-swap-horizontal-16-icon { + @extend %with-icon, %swap-horizontal-16-svg-prop; + background-image: var(--swap-horizontal-16-svg); +} +%with-swap-horizontal-16-mask { + @extend %with-mask, %swap-horizontal-16-svg-prop; + -webkit-mask-image: var(--swap-horizontal-16-svg); + mask-image: var(--swap-horizontal-16-svg); +} + +%with-swap-horizontal-24-icon { + @extend %with-icon, %swap-horizontal-24-svg-prop; + background-image: var(--swap-horizontal-24-svg); +} +%with-swap-horizontal-24-mask { + @extend %with-mask, %swap-horizontal-24-svg-prop; + -webkit-mask-image: var(--swap-horizontal-24-svg); + mask-image: var(--swap-horizontal-24-svg); +} + %with-swap-horizontal-icon { @extend %with-icon, %swap-horizontal-svg-prop; background-image: var(--swap-horizontal-svg); @@ -1688,6 +8848,26 @@ mask-image: var(--swap-horizontal-svg); } +%with-swap-vertical-16-icon { + @extend %with-icon, %swap-vertical-16-svg-prop; + background-image: var(--swap-vertical-16-svg); +} +%with-swap-vertical-16-mask { + @extend %with-mask, %swap-vertical-16-svg-prop; + -webkit-mask-image: var(--swap-vertical-16-svg); + mask-image: var(--swap-vertical-16-svg); +} + +%with-swap-vertical-24-icon { + @extend %with-icon, %swap-vertical-24-svg-prop; + background-image: var(--swap-vertical-24-svg); +} +%with-swap-vertical-24-mask { + @extend %with-mask, %swap-vertical-24-svg-prop; + -webkit-mask-image: var(--swap-vertical-24-svg); + mask-image: var(--swap-vertical-24-svg); +} + %with-swap-vertical-icon { @extend %with-icon, %swap-vertical-svg-prop; background-image: var(--swap-vertical-svg); @@ -1698,6 +8878,126 @@ mask-image: var(--swap-vertical-svg); } +%with-switcher-16-icon { + @extend %with-icon, %switcher-16-svg-prop; + background-image: var(--switcher-16-svg); +} +%with-switcher-16-mask { + @extend %with-mask, %switcher-16-svg-prop; + -webkit-mask-image: var(--switcher-16-svg); + mask-image: var(--switcher-16-svg); +} + +%with-switcher-24-icon { + @extend %with-icon, %switcher-24-svg-prop; + background-image: var(--switcher-24-svg); +} +%with-switcher-24-mask { + @extend %with-mask, %switcher-24-svg-prop; + -webkit-mask-image: var(--switcher-24-svg); + mask-image: var(--switcher-24-svg); +} + +%with-sync-16-icon { + @extend %with-icon, %sync-16-svg-prop; + background-image: var(--sync-16-svg); +} +%with-sync-16-mask { + @extend %with-mask, %sync-16-svg-prop; + -webkit-mask-image: var(--sync-16-svg); + mask-image: var(--sync-16-svg); +} + +%with-sync-24-icon { + @extend %with-icon, %sync-24-svg-prop; + background-image: var(--sync-24-svg); +} +%with-sync-24-mask { + @extend %with-mask, %sync-24-svg-prop; + -webkit-mask-image: var(--sync-24-svg); + mask-image: var(--sync-24-svg); +} + +%with-sync-alert-16-icon { + @extend %with-icon, %sync-alert-16-svg-prop; + background-image: var(--sync-alert-16-svg); +} +%with-sync-alert-16-mask { + @extend %with-mask, %sync-alert-16-svg-prop; + -webkit-mask-image: var(--sync-alert-16-svg); + mask-image: var(--sync-alert-16-svg); +} + +%with-sync-alert-24-icon { + @extend %with-icon, %sync-alert-24-svg-prop; + background-image: var(--sync-alert-24-svg); +} +%with-sync-alert-24-mask { + @extend %with-mask, %sync-alert-24-svg-prop; + -webkit-mask-image: var(--sync-alert-24-svg); + mask-image: var(--sync-alert-24-svg); +} + +%with-sync-reverse-16-icon { + @extend %with-icon, %sync-reverse-16-svg-prop; + background-image: var(--sync-reverse-16-svg); +} +%with-sync-reverse-16-mask { + @extend %with-mask, %sync-reverse-16-svg-prop; + -webkit-mask-image: var(--sync-reverse-16-svg); + mask-image: var(--sync-reverse-16-svg); +} + +%with-sync-reverse-24-icon { + @extend %with-icon, %sync-reverse-24-svg-prop; + background-image: var(--sync-reverse-24-svg); +} +%with-sync-reverse-24-mask { + @extend %with-mask, %sync-reverse-24-svg-prop; + -webkit-mask-image: var(--sync-reverse-24-svg); + mask-image: var(--sync-reverse-24-svg); +} + +%with-tablet-16-icon { + @extend %with-icon, %tablet-16-svg-prop; + background-image: var(--tablet-16-svg); +} +%with-tablet-16-mask { + @extend %with-mask, %tablet-16-svg-prop; + -webkit-mask-image: var(--tablet-16-svg); + mask-image: var(--tablet-16-svg); +} + +%with-tablet-24-icon { + @extend %with-icon, %tablet-24-svg-prop; + background-image: var(--tablet-24-svg); +} +%with-tablet-24-mask { + @extend %with-mask, %tablet-24-svg-prop; + -webkit-mask-image: var(--tablet-24-svg); + mask-image: var(--tablet-24-svg); +} + +%with-tag-16-icon { + @extend %with-icon, %tag-16-svg-prop; + background-image: var(--tag-16-svg); +} +%with-tag-16-mask { + @extend %with-mask, %tag-16-svg-prop; + -webkit-mask-image: var(--tag-16-svg); + mask-image: var(--tag-16-svg); +} + +%with-tag-24-icon { + @extend %with-icon, %tag-24-svg-prop; + background-image: var(--tag-24-svg); +} +%with-tag-24-mask { + @extend %with-mask, %tag-24-svg-prop; + -webkit-mask-image: var(--tag-24-svg); + mask-image: var(--tag-24-svg); +} + %with-tag-icon { @extend %with-icon, %tag-svg-prop; background-image: var(--tag-svg); @@ -1708,6 +9008,226 @@ mask-image: var(--tag-svg); } +%with-target-16-icon { + @extend %with-icon, %target-16-svg-prop; + background-image: var(--target-16-svg); +} +%with-target-16-mask { + @extend %with-mask, %target-16-svg-prop; + -webkit-mask-image: var(--target-16-svg); + mask-image: var(--target-16-svg); +} + +%with-target-24-icon { + @extend %with-icon, %target-24-svg-prop; + background-image: var(--target-24-svg); +} +%with-target-24-mask { + @extend %with-mask, %target-24-svg-prop; + -webkit-mask-image: var(--target-24-svg); + mask-image: var(--target-24-svg); +} + +%with-terminal-16-icon { + @extend %with-icon, %terminal-16-svg-prop; + background-image: var(--terminal-16-svg); +} +%with-terminal-16-mask { + @extend %with-mask, %terminal-16-svg-prop; + -webkit-mask-image: var(--terminal-16-svg); + mask-image: var(--terminal-16-svg); +} + +%with-terminal-24-icon { + @extend %with-icon, %terminal-24-svg-prop; + background-image: var(--terminal-24-svg); +} +%with-terminal-24-mask { + @extend %with-mask, %terminal-24-svg-prop; + -webkit-mask-image: var(--terminal-24-svg); + mask-image: var(--terminal-24-svg); +} + +%with-terminal-screen-16-icon { + @extend %with-icon, %terminal-screen-16-svg-prop; + background-image: var(--terminal-screen-16-svg); +} +%with-terminal-screen-16-mask { + @extend %with-mask, %terminal-screen-16-svg-prop; + -webkit-mask-image: var(--terminal-screen-16-svg); + mask-image: var(--terminal-screen-16-svg); +} + +%with-terminal-screen-24-icon { + @extend %with-icon, %terminal-screen-24-svg-prop; + background-image: var(--terminal-screen-24-svg); +} +%with-terminal-screen-24-mask { + @extend %with-mask, %terminal-screen-24-svg-prop; + -webkit-mask-image: var(--terminal-screen-24-svg); + mask-image: var(--terminal-screen-24-svg); +} + +%with-thumbs-down-16-icon { + @extend %with-icon, %thumbs-down-16-svg-prop; + background-image: var(--thumbs-down-16-svg); +} +%with-thumbs-down-16-mask { + @extend %with-mask, %thumbs-down-16-svg-prop; + -webkit-mask-image: var(--thumbs-down-16-svg); + mask-image: var(--thumbs-down-16-svg); +} + +%with-thumbs-down-24-icon { + @extend %with-icon, %thumbs-down-24-svg-prop; + background-image: var(--thumbs-down-24-svg); +} +%with-thumbs-down-24-mask { + @extend %with-mask, %thumbs-down-24-svg-prop; + -webkit-mask-image: var(--thumbs-down-24-svg); + mask-image: var(--thumbs-down-24-svg); +} + +%with-thumbs-up-16-icon { + @extend %with-icon, %thumbs-up-16-svg-prop; + background-image: var(--thumbs-up-16-svg); +} +%with-thumbs-up-16-mask { + @extend %with-mask, %thumbs-up-16-svg-prop; + -webkit-mask-image: var(--thumbs-up-16-svg); + mask-image: var(--thumbs-up-16-svg); +} + +%with-thumbs-up-24-icon { + @extend %with-icon, %thumbs-up-24-svg-prop; + background-image: var(--thumbs-up-24-svg); +} +%with-thumbs-up-24-mask { + @extend %with-mask, %thumbs-up-24-svg-prop; + -webkit-mask-image: var(--thumbs-up-24-svg); + mask-image: var(--thumbs-up-24-svg); +} + +%with-toggle-left-16-icon { + @extend %with-icon, %toggle-left-16-svg-prop; + background-image: var(--toggle-left-16-svg); +} +%with-toggle-left-16-mask { + @extend %with-mask, %toggle-left-16-svg-prop; + -webkit-mask-image: var(--toggle-left-16-svg); + mask-image: var(--toggle-left-16-svg); +} + +%with-toggle-left-24-icon { + @extend %with-icon, %toggle-left-24-svg-prop; + background-image: var(--toggle-left-24-svg); +} +%with-toggle-left-24-mask { + @extend %with-mask, %toggle-left-24-svg-prop; + -webkit-mask-image: var(--toggle-left-24-svg); + mask-image: var(--toggle-left-24-svg); +} + +%with-toggle-right-16-icon { + @extend %with-icon, %toggle-right-16-svg-prop; + background-image: var(--toggle-right-16-svg); +} +%with-toggle-right-16-mask { + @extend %with-mask, %toggle-right-16-svg-prop; + -webkit-mask-image: var(--toggle-right-16-svg); + mask-image: var(--toggle-right-16-svg); +} + +%with-toggle-right-24-icon { + @extend %with-icon, %toggle-right-24-svg-prop; + background-image: var(--toggle-right-24-svg); +} +%with-toggle-right-24-mask { + @extend %with-mask, %toggle-right-24-svg-prop; + -webkit-mask-image: var(--toggle-right-24-svg); + mask-image: var(--toggle-right-24-svg); +} + +%with-token-16-icon { + @extend %with-icon, %token-16-svg-prop; + background-image: var(--token-16-svg); +} +%with-token-16-mask { + @extend %with-mask, %token-16-svg-prop; + -webkit-mask-image: var(--token-16-svg); + mask-image: var(--token-16-svg); +} + +%with-token-24-icon { + @extend %with-icon, %token-24-svg-prop; + background-image: var(--token-24-svg); +} +%with-token-24-mask { + @extend %with-mask, %token-24-svg-prop; + -webkit-mask-image: var(--token-24-svg); + mask-image: var(--token-24-svg); +} + +%with-tools-16-icon { + @extend %with-icon, %tools-16-svg-prop; + background-image: var(--tools-16-svg); +} +%with-tools-16-mask { + @extend %with-mask, %tools-16-svg-prop; + -webkit-mask-image: var(--tools-16-svg); + mask-image: var(--tools-16-svg); +} + +%with-tools-24-icon { + @extend %with-icon, %tools-24-svg-prop; + background-image: var(--tools-24-svg); +} +%with-tools-24-mask { + @extend %with-mask, %tools-24-svg-prop; + -webkit-mask-image: var(--tools-24-svg); + mask-image: var(--tools-24-svg); +} + +%with-top-16-icon { + @extend %with-icon, %top-16-svg-prop; + background-image: var(--top-16-svg); +} +%with-top-16-mask { + @extend %with-mask, %top-16-svg-prop; + -webkit-mask-image: var(--top-16-svg); + mask-image: var(--top-16-svg); +} + +%with-top-24-icon { + @extend %with-icon, %top-24-svg-prop; + background-image: var(--top-24-svg); +} +%with-top-24-mask { + @extend %with-mask, %top-24-svg-prop; + -webkit-mask-image: var(--top-24-svg); + mask-image: var(--top-24-svg); +} + +%with-trash-16-icon { + @extend %with-icon, %trash-16-svg-prop; + background-image: var(--trash-16-svg); +} +%with-trash-16-mask { + @extend %with-mask, %trash-16-svg-prop; + -webkit-mask-image: var(--trash-16-svg); + mask-image: var(--trash-16-svg); +} + +%with-trash-24-icon { + @extend %with-icon, %trash-24-svg-prop; + background-image: var(--trash-24-svg); +} +%with-trash-24-mask { + @extend %with-mask, %trash-24-svg-prop; + -webkit-mask-image: var(--trash-24-svg); + mask-image: var(--trash-24-svg); +} + %with-trash-icon { @extend %with-icon, %trash-svg-prop; background-image: var(--trash-svg); @@ -1718,6 +9238,106 @@ mask-image: var(--trash-svg); } +%with-trend-down-16-icon { + @extend %with-icon, %trend-down-16-svg-prop; + background-image: var(--trend-down-16-svg); +} +%with-trend-down-16-mask { + @extend %with-mask, %trend-down-16-svg-prop; + -webkit-mask-image: var(--trend-down-16-svg); + mask-image: var(--trend-down-16-svg); +} + +%with-trend-down-24-icon { + @extend %with-icon, %trend-down-24-svg-prop; + background-image: var(--trend-down-24-svg); +} +%with-trend-down-24-mask { + @extend %with-mask, %trend-down-24-svg-prop; + -webkit-mask-image: var(--trend-down-24-svg); + mask-image: var(--trend-down-24-svg); +} + +%with-trend-up-16-icon { + @extend %with-icon, %trend-up-16-svg-prop; + background-image: var(--trend-up-16-svg); +} +%with-trend-up-16-mask { + @extend %with-mask, %trend-up-16-svg-prop; + -webkit-mask-image: var(--trend-up-16-svg); + mask-image: var(--trend-up-16-svg); +} + +%with-trend-up-24-icon { + @extend %with-icon, %trend-up-24-svg-prop; + background-image: var(--trend-up-24-svg); +} +%with-trend-up-24-mask { + @extend %with-mask, %trend-up-24-svg-prop; + -webkit-mask-image: var(--trend-up-24-svg); + mask-image: var(--trend-up-24-svg); +} + +%with-triangle-16-icon { + @extend %with-icon, %triangle-16-svg-prop; + background-image: var(--triangle-16-svg); +} +%with-triangle-16-mask { + @extend %with-mask, %triangle-16-svg-prop; + -webkit-mask-image: var(--triangle-16-svg); + mask-image: var(--triangle-16-svg); +} + +%with-triangle-24-icon { + @extend %with-icon, %triangle-24-svg-prop; + background-image: var(--triangle-24-svg); +} +%with-triangle-24-mask { + @extend %with-mask, %triangle-24-svg-prop; + -webkit-mask-image: var(--triangle-24-svg); + mask-image: var(--triangle-24-svg); +} + +%with-triangle-fill-16-icon { + @extend %with-icon, %triangle-fill-16-svg-prop; + background-image: var(--triangle-fill-16-svg); +} +%with-triangle-fill-16-mask { + @extend %with-mask, %triangle-fill-16-svg-prop; + -webkit-mask-image: var(--triangle-fill-16-svg); + mask-image: var(--triangle-fill-16-svg); +} + +%with-triangle-fill-24-icon { + @extend %with-icon, %triangle-fill-24-svg-prop; + background-image: var(--triangle-fill-24-svg); +} +%with-triangle-fill-24-mask { + @extend %with-mask, %triangle-fill-24-svg-prop; + -webkit-mask-image: var(--triangle-fill-24-svg); + mask-image: var(--triangle-fill-24-svg); +} + +%with-truck-16-icon { + @extend %with-icon, %truck-16-svg-prop; + background-image: var(--truck-16-svg); +} +%with-truck-16-mask { + @extend %with-mask, %truck-16-svg-prop; + -webkit-mask-image: var(--truck-16-svg); + mask-image: var(--truck-16-svg); +} + +%with-truck-24-icon { + @extend %with-icon, %truck-24-svg-prop; + background-image: var(--truck-24-svg); +} +%with-truck-24-mask { + @extend %with-mask, %truck-24-svg-prop; + -webkit-mask-image: var(--truck-24-svg); + mask-image: var(--truck-24-svg); +} + %with-tune-icon { @extend %with-icon, %tune-svg-prop; background-image: var(--tune-svg); @@ -1728,6 +9348,66 @@ mask-image: var(--tune-svg); } +%with-tv-16-icon { + @extend %with-icon, %tv-16-svg-prop; + background-image: var(--tv-16-svg); +} +%with-tv-16-mask { + @extend %with-mask, %tv-16-svg-prop; + -webkit-mask-image: var(--tv-16-svg); + mask-image: var(--tv-16-svg); +} + +%with-tv-24-icon { + @extend %with-icon, %tv-24-svg-prop; + background-image: var(--tv-24-svg); +} +%with-tv-24-mask { + @extend %with-mask, %tv-24-svg-prop; + -webkit-mask-image: var(--tv-24-svg); + mask-image: var(--tv-24-svg); +} + +%with-type-16-icon { + @extend %with-icon, %type-16-svg-prop; + background-image: var(--type-16-svg); +} +%with-type-16-mask { + @extend %with-mask, %type-16-svg-prop; + -webkit-mask-image: var(--type-16-svg); + mask-image: var(--type-16-svg); +} + +%with-type-24-icon { + @extend %with-icon, %type-24-svg-prop; + background-image: var(--type-24-svg); +} +%with-type-24-mask { + @extend %with-mask, %type-24-svg-prop; + -webkit-mask-image: var(--type-24-svg); + mask-image: var(--type-24-svg); +} + +%with-unfold-close-16-icon { + @extend %with-icon, %unfold-close-16-svg-prop; + background-image: var(--unfold-close-16-svg); +} +%with-unfold-close-16-mask { + @extend %with-mask, %unfold-close-16-svg-prop; + -webkit-mask-image: var(--unfold-close-16-svg); + mask-image: var(--unfold-close-16-svg); +} + +%with-unfold-close-24-icon { + @extend %with-icon, %unfold-close-24-svg-prop; + background-image: var(--unfold-close-24-svg); +} +%with-unfold-close-24-mask { + @extend %with-mask, %unfold-close-24-svg-prop; + -webkit-mask-image: var(--unfold-close-24-svg); + mask-image: var(--unfold-close-24-svg); +} + %with-unfold-less-icon { @extend %with-icon, %unfold-less-svg-prop; background-image: var(--unfold-less-svg); @@ -1748,6 +9428,66 @@ mask-image: var(--unfold-more-svg); } +%with-unfold-open-16-icon { + @extend %with-icon, %unfold-open-16-svg-prop; + background-image: var(--unfold-open-16-svg); +} +%with-unfold-open-16-mask { + @extend %with-mask, %unfold-open-16-svg-prop; + -webkit-mask-image: var(--unfold-open-16-svg); + mask-image: var(--unfold-open-16-svg); +} + +%with-unfold-open-24-icon { + @extend %with-icon, %unfold-open-24-svg-prop; + background-image: var(--unfold-open-24-svg); +} +%with-unfold-open-24-mask { + @extend %with-mask, %unfold-open-24-svg-prop; + -webkit-mask-image: var(--unfold-open-24-svg); + mask-image: var(--unfold-open-24-svg); +} + +%with-unlock-16-icon { + @extend %with-icon, %unlock-16-svg-prop; + background-image: var(--unlock-16-svg); +} +%with-unlock-16-mask { + @extend %with-mask, %unlock-16-svg-prop; + -webkit-mask-image: var(--unlock-16-svg); + mask-image: var(--unlock-16-svg); +} + +%with-unlock-24-icon { + @extend %with-icon, %unlock-24-svg-prop; + background-image: var(--unlock-24-svg); +} +%with-unlock-24-mask { + @extend %with-mask, %unlock-24-svg-prop; + -webkit-mask-image: var(--unlock-24-svg); + mask-image: var(--unlock-24-svg); +} + +%with-upload-16-icon { + @extend %with-icon, %upload-16-svg-prop; + background-image: var(--upload-16-svg); +} +%with-upload-16-mask { + @extend %with-mask, %upload-16-svg-prop; + -webkit-mask-image: var(--upload-16-svg); + mask-image: var(--upload-16-svg); +} + +%with-upload-24-icon { + @extend %with-icon, %upload-24-svg-prop; + background-image: var(--upload-24-svg); +} +%with-upload-24-mask { + @extend %with-mask, %upload-24-svg-prop; + -webkit-mask-image: var(--upload-24-svg); + mask-image: var(--upload-24-svg); +} + %with-upload-icon { @extend %with-icon, %upload-svg-prop; background-image: var(--upload-svg); @@ -1758,6 +9498,26 @@ mask-image: var(--upload-svg); } +%with-user-16-icon { + @extend %with-icon, %user-16-svg-prop; + background-image: var(--user-16-svg); +} +%with-user-16-mask { + @extend %with-mask, %user-16-svg-prop; + -webkit-mask-image: var(--user-16-svg); + mask-image: var(--user-16-svg); +} + +%with-user-24-icon { + @extend %with-icon, %user-24-svg-prop; + background-image: var(--user-24-svg); +} +%with-user-24-mask { + @extend %with-mask, %user-24-svg-prop; + -webkit-mask-image: var(--user-24-svg); + mask-image: var(--user-24-svg); +} + %with-user-add-icon { @extend %with-icon, %user-add-svg-prop; background-image: var(--user-add-svg); @@ -1768,6 +9528,86 @@ mask-image: var(--user-add-svg); } +%with-user-check-16-icon { + @extend %with-icon, %user-check-16-svg-prop; + background-image: var(--user-check-16-svg); +} +%with-user-check-16-mask { + @extend %with-mask, %user-check-16-svg-prop; + -webkit-mask-image: var(--user-check-16-svg); + mask-image: var(--user-check-16-svg); +} + +%with-user-check-24-icon { + @extend %with-icon, %user-check-24-svg-prop; + background-image: var(--user-check-24-svg); +} +%with-user-check-24-mask { + @extend %with-mask, %user-check-24-svg-prop; + -webkit-mask-image: var(--user-check-24-svg); + mask-image: var(--user-check-24-svg); +} + +%with-user-circle-16-icon { + @extend %with-icon, %user-circle-16-svg-prop; + background-image: var(--user-circle-16-svg); +} +%with-user-circle-16-mask { + @extend %with-mask, %user-circle-16-svg-prop; + -webkit-mask-image: var(--user-circle-16-svg); + mask-image: var(--user-circle-16-svg); +} + +%with-user-circle-24-icon { + @extend %with-icon, %user-circle-24-svg-prop; + background-image: var(--user-circle-24-svg); +} +%with-user-circle-24-mask { + @extend %with-mask, %user-circle-24-svg-prop; + -webkit-mask-image: var(--user-circle-24-svg); + mask-image: var(--user-circle-24-svg); +} + +%with-user-circle-fill-16-icon { + @extend %with-icon, %user-circle-fill-16-svg-prop; + background-image: var(--user-circle-fill-16-svg); +} +%with-user-circle-fill-16-mask { + @extend %with-mask, %user-circle-fill-16-svg-prop; + -webkit-mask-image: var(--user-circle-fill-16-svg); + mask-image: var(--user-circle-fill-16-svg); +} + +%with-user-circle-fill-24-icon { + @extend %with-icon, %user-circle-fill-24-svg-prop; + background-image: var(--user-circle-fill-24-svg); +} +%with-user-circle-fill-24-mask { + @extend %with-mask, %user-circle-fill-24-svg-prop; + -webkit-mask-image: var(--user-circle-fill-24-svg); + mask-image: var(--user-circle-fill-24-svg); +} + +%with-user-minus-16-icon { + @extend %with-icon, %user-minus-16-svg-prop; + background-image: var(--user-minus-16-svg); +} +%with-user-minus-16-mask { + @extend %with-mask, %user-minus-16-svg-prop; + -webkit-mask-image: var(--user-minus-16-svg); + mask-image: var(--user-minus-16-svg); +} + +%with-user-minus-24-icon { + @extend %with-icon, %user-minus-24-svg-prop; + background-image: var(--user-minus-24-svg); +} +%with-user-minus-24-mask { + @extend %with-mask, %user-minus-24-svg-prop; + -webkit-mask-image: var(--user-minus-24-svg); + mask-image: var(--user-minus-24-svg); +} + %with-user-organization-icon { @extend %with-icon, %user-organization-svg-prop; background-image: var(--user-organization-svg); @@ -1788,6 +9628,26 @@ mask-image: var(--user-plain-svg); } +%with-user-plus-16-icon { + @extend %with-icon, %user-plus-16-svg-prop; + background-image: var(--user-plus-16-svg); +} +%with-user-plus-16-mask { + @extend %with-mask, %user-plus-16-svg-prop; + -webkit-mask-image: var(--user-plus-16-svg); + mask-image: var(--user-plus-16-svg); +} + +%with-user-plus-24-icon { + @extend %with-icon, %user-plus-24-svg-prop; + background-image: var(--user-plus-24-svg); +} +%with-user-plus-24-mask { + @extend %with-mask, %user-plus-24-svg-prop; + -webkit-mask-image: var(--user-plus-24-svg); + mask-image: var(--user-plus-24-svg); +} + %with-user-square-fill-icon { @extend %with-icon, %user-square-fill-svg-prop; background-image: var(--user-square-fill-svg); @@ -1818,6 +9678,126 @@ mask-image: var(--user-team-svg); } +%with-user-x-16-icon { + @extend %with-icon, %user-x-16-svg-prop; + background-image: var(--user-x-16-svg); +} +%with-user-x-16-mask { + @extend %with-mask, %user-x-16-svg-prop; + -webkit-mask-image: var(--user-x-16-svg); + mask-image: var(--user-x-16-svg); +} + +%with-user-x-24-icon { + @extend %with-icon, %user-x-24-svg-prop; + background-image: var(--user-x-24-svg); +} +%with-user-x-24-mask { + @extend %with-mask, %user-x-24-svg-prop; + -webkit-mask-image: var(--user-x-24-svg); + mask-image: var(--user-x-24-svg); +} + +%with-users-16-icon { + @extend %with-icon, %users-16-svg-prop; + background-image: var(--users-16-svg); +} +%with-users-16-mask { + @extend %with-mask, %users-16-svg-prop; + -webkit-mask-image: var(--users-16-svg); + mask-image: var(--users-16-svg); +} + +%with-users-24-icon { + @extend %with-icon, %users-24-svg-prop; + background-image: var(--users-24-svg); +} +%with-users-24-mask { + @extend %with-mask, %users-24-svg-prop; + -webkit-mask-image: var(--users-24-svg); + mask-image: var(--users-24-svg); +} + +%with-vault-16-icon { + @extend %with-icon, %vault-16-svg-prop; + background-image: var(--vault-16-svg); +} +%with-vault-16-mask { + @extend %with-mask, %vault-16-svg-prop; + -webkit-mask-image: var(--vault-16-svg); + mask-image: var(--vault-16-svg); +} + +%with-vault-24-icon { + @extend %with-icon, %vault-24-svg-prop; + background-image: var(--vault-24-svg); +} +%with-vault-24-mask { + @extend %with-mask, %vault-24-svg-prop; + -webkit-mask-image: var(--vault-24-svg); + mask-image: var(--vault-24-svg); +} + +%with-verified-16-icon { + @extend %with-icon, %verified-16-svg-prop; + background-image: var(--verified-16-svg); +} +%with-verified-16-mask { + @extend %with-mask, %verified-16-svg-prop; + -webkit-mask-image: var(--verified-16-svg); + mask-image: var(--verified-16-svg); +} + +%with-verified-24-icon { + @extend %with-icon, %verified-24-svg-prop; + background-image: var(--verified-24-svg); +} +%with-verified-24-mask { + @extend %with-mask, %verified-24-svg-prop; + -webkit-mask-image: var(--verified-24-svg); + mask-image: var(--verified-24-svg); +} + +%with-video-16-icon { + @extend %with-icon, %video-16-svg-prop; + background-image: var(--video-16-svg); +} +%with-video-16-mask { + @extend %with-mask, %video-16-svg-prop; + -webkit-mask-image: var(--video-16-svg); + mask-image: var(--video-16-svg); +} + +%with-video-24-icon { + @extend %with-icon, %video-24-svg-prop; + background-image: var(--video-24-svg); +} +%with-video-24-mask { + @extend %with-mask, %video-24-svg-prop; + -webkit-mask-image: var(--video-24-svg); + mask-image: var(--video-24-svg); +} + +%with-video-off-16-icon { + @extend %with-icon, %video-off-16-svg-prop; + background-image: var(--video-off-16-svg); +} +%with-video-off-16-mask { + @extend %with-mask, %video-off-16-svg-prop; + -webkit-mask-image: var(--video-off-16-svg); + mask-image: var(--video-off-16-svg); +} + +%with-video-off-24-icon { + @extend %with-icon, %video-off-24-svg-prop; + background-image: var(--video-off-24-svg); +} +%with-video-off-24-mask { + @extend %with-mask, %video-off-24-svg-prop; + -webkit-mask-image: var(--video-off-24-svg); + mask-image: var(--video-off-24-svg); +} + %with-visibility-hide-icon { @extend %with-icon, %visibility-hide-svg-prop; background-image: var(--visibility-hide-svg); @@ -1838,6 +9818,186 @@ mask-image: var(--visibility-show-svg); } +%with-vmware-16-icon { + @extend %with-icon, %vmware-16-svg-prop; + background-image: var(--vmware-16-svg); +} +%with-vmware-16-mask { + @extend %with-mask, %vmware-16-svg-prop; + -webkit-mask-image: var(--vmware-16-svg); + mask-image: var(--vmware-16-svg); +} + +%with-vmware-24-icon { + @extend %with-icon, %vmware-24-svg-prop; + background-image: var(--vmware-24-svg); +} +%with-vmware-24-mask { + @extend %with-mask, %vmware-24-svg-prop; + -webkit-mask-image: var(--vmware-24-svg); + mask-image: var(--vmware-24-svg); +} + +%with-vmware-color-16-icon { + @extend %with-icon, %vmware-color-16-svg-prop; + background-image: var(--vmware-color-16-svg); +} +%with-vmware-color-16-mask { + @extend %with-mask, %vmware-color-16-svg-prop; + -webkit-mask-image: var(--vmware-color-16-svg); + mask-image: var(--vmware-color-16-svg); +} + +%with-vmware-color-24-icon { + @extend %with-icon, %vmware-color-24-svg-prop; + background-image: var(--vmware-color-24-svg); +} +%with-vmware-color-24-mask { + @extend %with-mask, %vmware-color-24-svg-prop; + -webkit-mask-image: var(--vmware-color-24-svg); + mask-image: var(--vmware-color-24-svg); +} + +%with-volume-16-icon { + @extend %with-icon, %volume-16-svg-prop; + background-image: var(--volume-16-svg); +} +%with-volume-16-mask { + @extend %with-mask, %volume-16-svg-prop; + -webkit-mask-image: var(--volume-16-svg); + mask-image: var(--volume-16-svg); +} + +%with-volume-2-16-icon { + @extend %with-icon, %volume-2-16-svg-prop; + background-image: var(--volume-2-16-svg); +} +%with-volume-2-16-mask { + @extend %with-mask, %volume-2-16-svg-prop; + -webkit-mask-image: var(--volume-2-16-svg); + mask-image: var(--volume-2-16-svg); +} + +%with-volume-2-24-icon { + @extend %with-icon, %volume-2-24-svg-prop; + background-image: var(--volume-2-24-svg); +} +%with-volume-2-24-mask { + @extend %with-mask, %volume-2-24-svg-prop; + -webkit-mask-image: var(--volume-2-24-svg); + mask-image: var(--volume-2-24-svg); +} + +%with-volume-24-icon { + @extend %with-icon, %volume-24-svg-prop; + background-image: var(--volume-24-svg); +} +%with-volume-24-mask { + @extend %with-mask, %volume-24-svg-prop; + -webkit-mask-image: var(--volume-24-svg); + mask-image: var(--volume-24-svg); +} + +%with-volume-down-16-icon { + @extend %with-icon, %volume-down-16-svg-prop; + background-image: var(--volume-down-16-svg); +} +%with-volume-down-16-mask { + @extend %with-mask, %volume-down-16-svg-prop; + -webkit-mask-image: var(--volume-down-16-svg); + mask-image: var(--volume-down-16-svg); +} + +%with-volume-down-24-icon { + @extend %with-icon, %volume-down-24-svg-prop; + background-image: var(--volume-down-24-svg); +} +%with-volume-down-24-mask { + @extend %with-mask, %volume-down-24-svg-prop; + -webkit-mask-image: var(--volume-down-24-svg); + mask-image: var(--volume-down-24-svg); +} + +%with-volume-x-16-icon { + @extend %with-icon, %volume-x-16-svg-prop; + background-image: var(--volume-x-16-svg); +} +%with-volume-x-16-mask { + @extend %with-mask, %volume-x-16-svg-prop; + -webkit-mask-image: var(--volume-x-16-svg); + mask-image: var(--volume-x-16-svg); +} + +%with-volume-x-24-icon { + @extend %with-icon, %volume-x-24-svg-prop; + background-image: var(--volume-x-24-svg); +} +%with-volume-x-24-mask { + @extend %with-mask, %volume-x-24-svg-prop; + -webkit-mask-image: var(--volume-x-24-svg); + mask-image: var(--volume-x-24-svg); +} + +%with-wall-16-icon { + @extend %with-icon, %wall-16-svg-prop; + background-image: var(--wall-16-svg); +} +%with-wall-16-mask { + @extend %with-mask, %wall-16-svg-prop; + -webkit-mask-image: var(--wall-16-svg); + mask-image: var(--wall-16-svg); +} + +%with-wall-24-icon { + @extend %with-icon, %wall-24-svg-prop; + background-image: var(--wall-24-svg); +} +%with-wall-24-mask { + @extend %with-mask, %wall-24-svg-prop; + -webkit-mask-image: var(--wall-24-svg); + mask-image: var(--wall-24-svg); +} + +%with-watch-16-icon { + @extend %with-icon, %watch-16-svg-prop; + background-image: var(--watch-16-svg); +} +%with-watch-16-mask { + @extend %with-mask, %watch-16-svg-prop; + -webkit-mask-image: var(--watch-16-svg); + mask-image: var(--watch-16-svg); +} + +%with-watch-24-icon { + @extend %with-icon, %watch-24-svg-prop; + background-image: var(--watch-24-svg); +} +%with-watch-24-mask { + @extend %with-mask, %watch-24-svg-prop; + -webkit-mask-image: var(--watch-24-svg); + mask-image: var(--watch-24-svg); +} + +%with-webhook-16-icon { + @extend %with-icon, %webhook-16-svg-prop; + background-image: var(--webhook-16-svg); +} +%with-webhook-16-mask { + @extend %with-mask, %webhook-16-svg-prop; + -webkit-mask-image: var(--webhook-16-svg); + mask-image: var(--webhook-16-svg); +} + +%with-webhook-24-icon { + @extend %with-icon, %webhook-24-svg-prop; + background-image: var(--webhook-24-svg); +} +%with-webhook-24-mask { + @extend %with-mask, %webhook-24-svg-prop; + -webkit-mask-image: var(--webhook-24-svg); + mask-image: var(--webhook-24-svg); +} + %with-webhook-icon { @extend %with-icon, %webhook-svg-prop; background-image: var(--webhook-svg); @@ -1847,3 +10007,323 @@ -webkit-mask-image: var(--webhook-svg); mask-image: var(--webhook-svg); } + +%with-wifi-16-icon { + @extend %with-icon, %wifi-16-svg-prop; + background-image: var(--wifi-16-svg); +} +%with-wifi-16-mask { + @extend %with-mask, %wifi-16-svg-prop; + -webkit-mask-image: var(--wifi-16-svg); + mask-image: var(--wifi-16-svg); +} + +%with-wifi-24-icon { + @extend %with-icon, %wifi-24-svg-prop; + background-image: var(--wifi-24-svg); +} +%with-wifi-24-mask { + @extend %with-mask, %wifi-24-svg-prop; + -webkit-mask-image: var(--wifi-24-svg); + mask-image: var(--wifi-24-svg); +} + +%with-wifi-off-16-icon { + @extend %with-icon, %wifi-off-16-svg-prop; + background-image: var(--wifi-off-16-svg); +} +%with-wifi-off-16-mask { + @extend %with-mask, %wifi-off-16-svg-prop; + -webkit-mask-image: var(--wifi-off-16-svg); + mask-image: var(--wifi-off-16-svg); +} + +%with-wifi-off-24-icon { + @extend %with-icon, %wifi-off-24-svg-prop; + background-image: var(--wifi-off-24-svg); +} +%with-wifi-off-24-mask { + @extend %with-mask, %wifi-off-24-svg-prop; + -webkit-mask-image: var(--wifi-off-24-svg); + mask-image: var(--wifi-off-24-svg); +} + +%with-wrench-16-icon { + @extend %with-icon, %wrench-16-svg-prop; + background-image: var(--wrench-16-svg); +} +%with-wrench-16-mask { + @extend %with-mask, %wrench-16-svg-prop; + -webkit-mask-image: var(--wrench-16-svg); + mask-image: var(--wrench-16-svg); +} + +%with-wrench-24-icon { + @extend %with-icon, %wrench-24-svg-prop; + background-image: var(--wrench-24-svg); +} +%with-wrench-24-mask { + @extend %with-mask, %wrench-24-svg-prop; + -webkit-mask-image: var(--wrench-24-svg); + mask-image: var(--wrench-24-svg); +} + +%with-x-16-icon { + @extend %with-icon, %x-16-svg-prop; + background-image: var(--x-16-svg); +} +%with-x-16-mask { + @extend %with-mask, %x-16-svg-prop; + -webkit-mask-image: var(--x-16-svg); + mask-image: var(--x-16-svg); +} + +%with-x-24-icon { + @extend %with-icon, %x-24-svg-prop; + background-image: var(--x-24-svg); +} +%with-x-24-mask { + @extend %with-mask, %x-24-svg-prop; + -webkit-mask-image: var(--x-24-svg); + mask-image: var(--x-24-svg); +} + +%with-x-circle-16-icon { + @extend %with-icon, %x-circle-16-svg-prop; + background-image: var(--x-circle-16-svg); +} +%with-x-circle-16-mask { + @extend %with-mask, %x-circle-16-svg-prop; + -webkit-mask-image: var(--x-circle-16-svg); + mask-image: var(--x-circle-16-svg); +} + +%with-x-circle-24-icon { + @extend %with-icon, %x-circle-24-svg-prop; + background-image: var(--x-circle-24-svg); +} +%with-x-circle-24-mask { + @extend %with-mask, %x-circle-24-svg-prop; + -webkit-mask-image: var(--x-circle-24-svg); + mask-image: var(--x-circle-24-svg); +} + +%with-x-circle-fill-16-icon { + @extend %with-icon, %x-circle-fill-16-svg-prop; + background-image: var(--x-circle-fill-16-svg); +} +%with-x-circle-fill-16-mask { + @extend %with-mask, %x-circle-fill-16-svg-prop; + -webkit-mask-image: var(--x-circle-fill-16-svg); + mask-image: var(--x-circle-fill-16-svg); +} + +%with-x-circle-fill-24-icon { + @extend %with-icon, %x-circle-fill-24-svg-prop; + background-image: var(--x-circle-fill-24-svg); +} +%with-x-circle-fill-24-mask { + @extend %with-mask, %x-circle-fill-24-svg-prop; + -webkit-mask-image: var(--x-circle-fill-24-svg); + mask-image: var(--x-circle-fill-24-svg); +} + +%with-x-diamond-16-icon { + @extend %with-icon, %x-diamond-16-svg-prop; + background-image: var(--x-diamond-16-svg); +} +%with-x-diamond-16-mask { + @extend %with-mask, %x-diamond-16-svg-prop; + -webkit-mask-image: var(--x-diamond-16-svg); + mask-image: var(--x-diamond-16-svg); +} + +%with-x-diamond-24-icon { + @extend %with-icon, %x-diamond-24-svg-prop; + background-image: var(--x-diamond-24-svg); +} +%with-x-diamond-24-mask { + @extend %with-mask, %x-diamond-24-svg-prop; + -webkit-mask-image: var(--x-diamond-24-svg); + mask-image: var(--x-diamond-24-svg); +} + +%with-x-diamond-fill-16-icon { + @extend %with-icon, %x-diamond-fill-16-svg-prop; + background-image: var(--x-diamond-fill-16-svg); +} +%with-x-diamond-fill-16-mask { + @extend %with-mask, %x-diamond-fill-16-svg-prop; + -webkit-mask-image: var(--x-diamond-fill-16-svg); + mask-image: var(--x-diamond-fill-16-svg); +} + +%with-x-diamond-fill-24-icon { + @extend %with-icon, %x-diamond-fill-24-svg-prop; + background-image: var(--x-diamond-fill-24-svg); +} +%with-x-diamond-fill-24-mask { + @extend %with-mask, %x-diamond-fill-24-svg-prop; + -webkit-mask-image: var(--x-diamond-fill-24-svg); + mask-image: var(--x-diamond-fill-24-svg); +} + +%with-x-hexagon-16-icon { + @extend %with-icon, %x-hexagon-16-svg-prop; + background-image: var(--x-hexagon-16-svg); +} +%with-x-hexagon-16-mask { + @extend %with-mask, %x-hexagon-16-svg-prop; + -webkit-mask-image: var(--x-hexagon-16-svg); + mask-image: var(--x-hexagon-16-svg); +} + +%with-x-hexagon-24-icon { + @extend %with-icon, %x-hexagon-24-svg-prop; + background-image: var(--x-hexagon-24-svg); +} +%with-x-hexagon-24-mask { + @extend %with-mask, %x-hexagon-24-svg-prop; + -webkit-mask-image: var(--x-hexagon-24-svg); + mask-image: var(--x-hexagon-24-svg); +} + +%with-x-hexagon-fill-16-icon { + @extend %with-icon, %x-hexagon-fill-16-svg-prop; + background-image: var(--x-hexagon-fill-16-svg); +} +%with-x-hexagon-fill-16-mask { + @extend %with-mask, %x-hexagon-fill-16-svg-prop; + -webkit-mask-image: var(--x-hexagon-fill-16-svg); + mask-image: var(--x-hexagon-fill-16-svg); +} + +%with-x-hexagon-fill-24-icon { + @extend %with-icon, %x-hexagon-fill-24-svg-prop; + background-image: var(--x-hexagon-fill-24-svg); +} +%with-x-hexagon-fill-24-mask { + @extend %with-mask, %x-hexagon-fill-24-svg-prop; + -webkit-mask-image: var(--x-hexagon-fill-24-svg); + mask-image: var(--x-hexagon-fill-24-svg); +} + +%with-x-square-16-icon { + @extend %with-icon, %x-square-16-svg-prop; + background-image: var(--x-square-16-svg); +} +%with-x-square-16-mask { + @extend %with-mask, %x-square-16-svg-prop; + -webkit-mask-image: var(--x-square-16-svg); + mask-image: var(--x-square-16-svg); +} + +%with-x-square-24-icon { + @extend %with-icon, %x-square-24-svg-prop; + background-image: var(--x-square-24-svg); +} +%with-x-square-24-mask { + @extend %with-mask, %x-square-24-svg-prop; + -webkit-mask-image: var(--x-square-24-svg); + mask-image: var(--x-square-24-svg); +} + +%with-x-square-fill-16-icon { + @extend %with-icon, %x-square-fill-16-svg-prop; + background-image: var(--x-square-fill-16-svg); +} +%with-x-square-fill-16-mask { + @extend %with-mask, %x-square-fill-16-svg-prop; + -webkit-mask-image: var(--x-square-fill-16-svg); + mask-image: var(--x-square-fill-16-svg); +} + +%with-x-square-fill-24-icon { + @extend %with-icon, %x-square-fill-24-svg-prop; + background-image: var(--x-square-fill-24-svg); +} +%with-x-square-fill-24-mask { + @extend %with-mask, %x-square-fill-24-svg-prop; + -webkit-mask-image: var(--x-square-fill-24-svg); + mask-image: var(--x-square-fill-24-svg); +} + +%with-zap-16-icon { + @extend %with-icon, %zap-16-svg-prop; + background-image: var(--zap-16-svg); +} +%with-zap-16-mask { + @extend %with-mask, %zap-16-svg-prop; + -webkit-mask-image: var(--zap-16-svg); + mask-image: var(--zap-16-svg); +} + +%with-zap-24-icon { + @extend %with-icon, %zap-24-svg-prop; + background-image: var(--zap-24-svg); +} +%with-zap-24-mask { + @extend %with-mask, %zap-24-svg-prop; + -webkit-mask-image: var(--zap-24-svg); + mask-image: var(--zap-24-svg); +} + +%with-zap-off-16-icon { + @extend %with-icon, %zap-off-16-svg-prop; + background-image: var(--zap-off-16-svg); +} +%with-zap-off-16-mask { + @extend %with-mask, %zap-off-16-svg-prop; + -webkit-mask-image: var(--zap-off-16-svg); + mask-image: var(--zap-off-16-svg); +} + +%with-zap-off-24-icon { + @extend %with-icon, %zap-off-24-svg-prop; + background-image: var(--zap-off-24-svg); +} +%with-zap-off-24-mask { + @extend %with-mask, %zap-off-24-svg-prop; + -webkit-mask-image: var(--zap-off-24-svg); + mask-image: var(--zap-off-24-svg); +} + +%with-zoom-in-16-icon { + @extend %with-icon, %zoom-in-16-svg-prop; + background-image: var(--zoom-in-16-svg); +} +%with-zoom-in-16-mask { + @extend %with-mask, %zoom-in-16-svg-prop; + -webkit-mask-image: var(--zoom-in-16-svg); + mask-image: var(--zoom-in-16-svg); +} + +%with-zoom-in-24-icon { + @extend %with-icon, %zoom-in-24-svg-prop; + background-image: var(--zoom-in-24-svg); +} +%with-zoom-in-24-mask { + @extend %with-mask, %zoom-in-24-svg-prop; + -webkit-mask-image: var(--zoom-in-24-svg); + mask-image: var(--zoom-in-24-svg); +} + +%with-zoom-out-16-icon { + @extend %with-icon, %zoom-out-16-svg-prop; + background-image: var(--zoom-out-16-svg); +} +%with-zoom-out-16-mask { + @extend %with-mask, %zoom-out-16-svg-prop; + -webkit-mask-image: var(--zoom-out-16-svg); + mask-image: var(--zoom-out-16-svg); +} + +%with-zoom-out-24-icon { + @extend %with-icon, %zoom-out-24-svg-prop; + background-image: var(--zoom-out-24-svg); +} +%with-zoom-out-24-mask { + @extend %with-mask, %zoom-out-24-svg-prop; + -webkit-mask-image: var(--zoom-out-24-svg); + mask-image: var(--zoom-out-24-svg); +} diff --git a/ui/packages/consul-ui/app/styles/layout.scss b/ui/packages/consul-ui/app/styles/layout.scss index 31942ed8c2..6c689ec61f 100644 --- a/ui/packages/consul-ui/app/styles/layout.scss +++ b/ui/packages/consul-ui/app/styles/layout.scss @@ -84,6 +84,9 @@ main, html:not(.has-nspaces) [class*='nspace-'] { display: none; } +html:not(.has-partitions) [class*='partition-'] { + display: none; +} #wrapper { @extend %viewport-container; display: flex; diff --git a/ui/packages/consul-ui/app/styles/themes.scss b/ui/packages/consul-ui/app/styles/themes.scss index cfb289768e..a29b1c68af 100644 --- a/ui/packages/consul-ui/app/styles/themes.scss +++ b/ui/packages/consul-ui/app/styles/themes.scss @@ -6,9 +6,6 @@ %main-nav-horizontal { @extend %theme-dark; } -%main-nav-vertical .nspaces .menu-panel > div { - @extend %theme-light; -} %main-nav-vertical .menu-panel a:hover, %main-nav-vertical .menu-panel a:focus { background-color: var(--blue-500); diff --git a/ui/packages/consul-ui/app/templates/dc/acls/policies/index.hbs b/ui/packages/consul-ui/app/templates/dc/acls/policies/index.hbs index b5bf0657bd..8ccde2b753 100644 --- a/ui/packages/consul-ui/app/templates/dc/acls/policies/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/acls/policies/index.hbs @@ -69,7 +69,9 @@ as |route|> + {{#if (can "create policies")}} Create + {{/if}} {{#if (gt items.length 0) }} diff --git a/ui/packages/consul-ui/app/templates/dc/acls/roles/index.hbs b/ui/packages/consul-ui/app/templates/dc/acls/roles/index.hbs index e4f3f0dbdf..210ea0fa5c 100644 --- a/ui/packages/consul-ui/app/templates/dc/acls/roles/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/acls/roles/index.hbs @@ -63,7 +63,9 @@ as |route|> + {{#if (can "create roles")}} Create + {{/if}} {{#if (gt items.length 0) }} diff --git a/ui/packages/consul-ui/app/templates/dc/intentions/edit.hbs b/ui/packages/consul-ui/app/templates/dc/intentions/edit.hbs index f933c7c259..56d54c379c 100644 --- a/ui/packages/consul-ui/app/templates/dc/intentions/edit.hbs +++ b/ui/packages/consul-ui/app/templates/dc/intentions/edit.hbs @@ -31,7 +31,7 @@ as |item|}}

    - {{#if item.IsEditable}} + {{#if (can "write intention" item=item)}} {{#if item.ID}} {{else}} diff --git a/ui/packages/consul-ui/app/templates/dc/nspaces/index.hbs b/ui/packages/consul-ui/app/templates/dc/nspaces/index.hbs index e57a3b52fc..e5721fbb5a 100644 --- a/ui/packages/consul-ui/app/templates/dc/nspaces/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/nspaces/index.hbs @@ -55,7 +55,9 @@ as |route|>

    + {{#if (can "create nspaces")}} Create + {{/if}} {{#if (gt items.length 0)}} diff --git a/ui/packages/consul-ui/mock-api/v1/connect/_ b/ui/packages/consul-ui/mock-api/v1/connect/_ index 389033975e..0e7cec685f 100644 --- a/ui/packages/consul-ui/mock-api/v1/connect/_ +++ b/ui/packages/consul-ui/mock-api/v1/connect/_ @@ -22,10 +22,12 @@ ${legacy ? ` "Action": "${fake.helpers.randomize(['allow', 'deny'])}", `:``} "Description": "${fake.lorem.sentence()}", - "SourceNS": "default", "SourceName": "${fake.hacker.noun()}-${i}", - "DestinationNS": "default", "DestinationName": "${fake.hacker.noun()}", + "SourceNS": "default", + "DestinationNS": "default", + "SourcePartition": "default", + "DestinationPartition": "default", "SourceType": "${fake.helpers.randomize(['consul', 'externaluri'])}", ${!legacy ? ` "Permissions": [ diff --git a/ui/packages/consul-ui/mock-api/v1/connect/intentions/_ b/ui/packages/consul-ui/mock-api/v1/connect/intentions/_ index f3e9a8ca51..d739883eb1 100644 --- a/ui/packages/consul-ui/mock-api/v1/connect/intentions/_ +++ b/ui/packages/consul-ui/mock-api/v1/connect/intentions/_ @@ -6,10 +6,12 @@ return ` "ID": "${legacy ? ID : ''}" ${ http.method !== "PUT" ? ` ,"Description": "${fake.lorem.sentence()}", - "SourceNS": "default", "SourceName": "${fake.hacker.noun()}", - "DestinationNS": "default", "DestinationName": "${fake.hacker.noun()}", + "SourceNS": "default", + "DestinationNS": "default", + "SourcePartition": "default", + "DestinationPartition": "default", "SourceType": "${fake.helpers.randomize(['consul', 'externaluri'])}", ${legacy ? ` "Action": "${fake.helpers.randomize(['allow', 'deny'])}", diff --git a/ui/packages/consul-ui/mock-api/v1/connect/intentions/exact b/ui/packages/consul-ui/mock-api/v1/connect/intentions/exact index 0b8d1269c8..72d7633e29 100644 --- a/ui/packages/consul-ui/mock-api/v1/connect/intentions/exact +++ b/ui/packages/consul-ui/mock-api/v1/connect/intentions/exact @@ -8,10 +8,12 @@ return ` "ID": "${legacy ? ID : ''}" ${ http.method !== "PUT" ? ` ,"Description": "${fake.lorem.sentence()}", - "SourceNS": "${source[0]}", - "SourceName": "${source[1]}", - "DestinationNS": "${destination[0]}", - "DestinationName": "${destination[1]}", + "SourceName": "${source[2]}", + "DestinationName": "${destination[2]}", + "SourceNS": "${source[1]}", + "DestinationNS": "${destination[1]}", + "SourcePartition": "${source[0]}", + "DestinationPartition": "${destination[0]}", "SourceType": "${fake.helpers.randomize(['consul', 'externaluri'])}", ${legacy ? ` "Action": "${fake.helpers.randomize(['allow', 'deny'])}", diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature index 38627f187d..0b4c6baa65 100644 --- a/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature +++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature @@ -37,22 +37,24 @@ Feature: dc / intentions / create: Intention Create Then I see the text "db" in "[data-test-destination-element] .ember-power-select-selected-item" # Set source nspace And I click "[data-test-source-nspace] .ember-power-select-trigger" - And I click ".ember-power-select-option:nth-child(2)" + And I click ".ember-power-select-option:last-child" Then I see the text "nspace-0" in "[data-test-source-nspace] .ember-power-select-selected-item" # Set destination nspace And I click "[data-test-destination-nspace] .ember-power-select-trigger" - And I click ".ember-power-select-option:nth-child(2)" + And I click ".ember-power-select-option:last-child" Then I see the text "nspace-0" in "[data-test-destination-nspace] .ember-power-select-selected-item" # Specifically set deny And I click ".value-deny" And I submit - Then a PUT request was made to "/v1/connect/intentions/exact?source=nspace-0%2Fweb&destination=nspace-0%2Fdb&dc=datacenter" from yaml + Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fnspace-0%2Fweb&destination=default%2Fnspace-0%2Fdb&dc=datacenter" from yaml --- body: SourceName: web DestinationName: db SourceNS: nspace-0 DestinationNS: nspace-0 + SourcePartition: default + DestinationPartition: default Action: deny --- Then the url should be /datacenter/intentions @@ -90,7 +92,7 @@ Feature: dc / intentions / create: Intention Create # Specifically set deny And I click ".value-deny" And I submit - Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" from yaml + Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fdefault%2Fweb&destination=default%2Fdefault%2Fdb&dc=datacenter" from yaml --- body: SourceName: web diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/delete.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/delete.feature index 9b5f186464..52ca40690a 100644 --- a/ui/packages/consul-ui/tests/acceptance/dc/intentions/delete.feature +++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/delete.feature @@ -4,10 +4,12 @@ Feature: dc / intentions / deleting: Deleting items with confirmations, success Given 1 datacenter model with the value "datacenter" And 1 intention model from yaml --- - SourceNS: default SourceName: name - DestinationNS: default DestinationName: destination + SourceNS: default + DestinationNS: default + SourcePartition: default + DestinationPartition: default ID: ee52203d-989f-4f7a-ab5a-2bef004164ca Meta: ~ --- @@ -19,7 +21,7 @@ Feature: dc / intentions / deleting: Deleting items with confirmations, success And I click actions on the intentionList.intentions And I click delete on the intentionList.intentions And I click confirmDelete on the intentionList.intentions - Then a DELETE request was made to "/v1/connect/intentions/exact?source=default%2Fname&destination=default%2Fdestination&dc=datacenter" + Then a DELETE request was made to "/v1/connect/intentions/exact?source=default%2Fdefault%2Fname&destination=default%2Fdefault%2Fdestination&dc=datacenter" And "[data-notification]" has the "notification-delete" class And "[data-notification]" has the "success" class Scenario: Deleting an intention from the intention detail page @@ -30,7 +32,7 @@ Feature: dc / intentions / deleting: Deleting items with confirmations, success --- And I click delete And I click confirmDelete - Then a DELETE request was made to "/v1/connect/intentions/exact?source=default%2Fname&destination=default%2Fdestination&dc=datacenter" + Then a DELETE request was made to "/v1/connect/intentions/exact?source=default%2Fdefault%2Fname&destination=default%2Fdefault%2Fdestination&dc=datacenter" And "[data-notification]" has the "notification-delete" class And "[data-notification]" has the "success" class Scenario: Deleting an intention from the intention detail page and getting an error @@ -39,7 +41,7 @@ Feature: dc / intentions / deleting: Deleting items with confirmations, success dc: datacenter intention: ee52203d-989f-4f7a-ab5a-2bef004164ca --- - Given the url "/v1/connect/intentions/exact?source=default%2Fname&destination=default%2Fdestination&dc=datacenter" responds with a 500 status + Given the url "/v1/connect/intentions/exact?source=default%2Fdefault%2Fname&destination=default%2Fdefault%2Fdestination&dc=datacenter" responds with a 500 status And I click delete And I click confirmDelete And "[data-notification]" has the "notification-update" class @@ -50,7 +52,7 @@ Feature: dc / intentions / deleting: Deleting items with confirmations, success dc: datacenter intention: ee52203d-989f-4f7a-ab5a-2bef004164ca --- - Given the url "/v1/connect/intentions/exact?source=default%2Fname&destination=default%2Fdestination&dc=datacenter" responds with from yaml + Given the url "/v1/connect/intentions/exact?source=default%2Fdefault%2Fname&destination=default%2Fdefault%2Fdestination&dc=datacenter" responds with from yaml --- status: 500 body: "duplicate intention found:" diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature index 9cf390731e..2d8b203fba 100644 --- a/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature +++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature @@ -4,10 +4,12 @@ Feature: dc / intentions / permissions / warn: Intention Permission Warn Given 1 datacenter model with the value "datacenter" And 1 intention model from yaml --- - SourceNS: default SourceName: web - DestinationNS: default DestinationName: db + SourceNS: default + DestinationNS: default + SourcePartition: default + DestinationPartition: default Action: ~ Permissions: - Action: allow @@ -28,4 +30,4 @@ Feature: dc / intentions / permissions / warn: Intention Permission Warn And I submit And I see the warning object And I click the warning.confirm object - Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" from yaml + Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fdefault%2Fweb&destination=default%2Fdefault%2Fdb&dc=datacenter" from yaml diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/update.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/update.feature index 3c3effc24c..0d7b8525c7 100644 --- a/ui/packages/consul-ui/tests/acceptance/dc/intentions/update.feature +++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/update.feature @@ -4,10 +4,12 @@ Feature: dc / intentions / update: Intention Update Given 1 datacenter model with the value "datacenter" And 1 intention model from yaml --- - SourceNS: default SourceName: web - DestinationNS: default DestinationName: db + SourceNS: default + DestinationNS: default + SourcePartition: default + DestinationPartition: default ID: intention-id --- When I visit the intention page for yaml @@ -24,7 +26,7 @@ Feature: dc / intentions / update: Intention Update --- And I click "[value=[Action]]" And I submit - Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" from yaml + Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fdefault%2Fweb&destination=default%2Fdefault%2Fdb&dc=datacenter" from yaml --- Description: [Description] Action: [Action] @@ -39,7 +41,7 @@ Feature: dc / intentions / update: Intention Update | Desc | allow | ------------------------------ Scenario: There was an error saving the intention - Given the url "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" responds with a 500 status + Given the url "/v1/connect/intentions/exact?source=default%2Fdefault%2Fweb&destination=default%2Fdefault%2Fdb&dc=datacenter" responds with a 500 status And I submit Then the url should be /datacenter/intentions/intention-id Then "[data-notification]" has the "notification-update" class diff --git a/ui/packages/consul-ui/tests/acceptance/dc/services/show/intentions.feature b/ui/packages/consul-ui/tests/acceptance/dc/services/show/intentions.feature index 2e87d16497..61bd40ea77 100644 --- a/ui/packages/consul-ui/tests/acceptance/dc/services/show/intentions.feature +++ b/ui/packages/consul-ui/tests/acceptance/dc/services/show/intentions.feature @@ -15,10 +15,12 @@ Feature: dc / services / show / intentions: Intentions per service - ID: 755b72bd-f5ab-4c92-90cc-bed0e7d8e9f0 Action: allow Meta: ~ - SourceNS: default SourceName: name - DestinationNS: default DestinationName: destination + SourceNS: default + DestinationNS: default + SourcePartition: default + DestinationPartition: default - ID: 755b72bd-f5ab-4c92-90cc-bed0e7d8e9f1 Action: deny @@ -39,11 +41,11 @@ Feature: dc / services / show / intentions: Intentions per service Scenario: I can see intentions And I see 3 intention models on the intentionList component And I click intention on the intentionList.intentions component - Then the url should be /dc1/services/service-0/intentions/default:name:default:destination + Then the url should be /dc1/services/service-0/intentions/default:default:name:default:default:destination Scenario: I can delete intentions And I click actions on the intentionList.intentions component And I click delete on the intentionList.intentions component And I click confirmDelete on the intentionList.intentions - Then a DELETE request was made to "/v1/connect/intentions/exact?source=default%2Fname&destination=default%2Fdestination&dc=dc1" + Then a DELETE request was made to "/v1/connect/intentions/exact?source=default%2Fdefault%2Fname&destination=default%2Fdefault%2Fdestination&dc=dc1" And "[data-notification]" has the "notification-delete" class And "[data-notification]" has the "success" class diff --git a/ui/packages/consul-ui/tests/integration/adapters/intention-test.js b/ui/packages/consul-ui/tests/integration/adapters/intention-test.js index dd72d13d6b..124cf63ebd 100644 --- a/ui/packages/consul-ui/tests/integration/adapters/intention-test.js +++ b/ui/packages/consul-ui/tests/integration/adapters/intention-test.js @@ -7,7 +7,8 @@ const nspaceRunner = getNspaceRunner('intention'); module('Integration | Adapter | intention', function(hooks) { setupTest(hooks); const dc = 'dc-1'; - const id = 'SourceNS:SourceName:DestinationNS:DestinationName'; + const id = + 'SourcePartition:SourceNS:SourceName:DestinationPartition:DestinationNS:DestinationName'; test('requestForQuery returns the correct url', function(assert) { return nspaceRunner( (adapter, serializer, client) => { @@ -15,6 +16,7 @@ module('Integration | Adapter | intention', function(hooks) { return adapter.requestForQuery(request, { dc: dc, ns: 'team-1', + partition: 'partition-1', filter: '*', index: 1, }); @@ -23,6 +25,7 @@ module('Integration | Adapter | intention', function(hooks) { filter: '*', index: 1, ns: '*', + partition: '*', }, { filter: '*', @@ -36,7 +39,7 @@ module('Integration | Adapter | intention', function(hooks) { const adapter = this.owner.lookup('adapter:intention'); const client = this.owner.lookup('service:client/http'); const request = client.url.bind(client); - const expected = `GET /v1/connect/intentions/exact?source=SourceNS%2FSourceName&destination=DestinationNS%2FDestinationName&dc=${dc}`; + const expected = `GET /v1/connect/intentions/exact?source=SourcePartition%2FSourceNS%2FSourceName&destination=DestinationPartition%2FDestinationNS%2FDestinationName&dc=${dc}`; const actual = adapter .requestForQueryRecord(request, { dc: dc, @@ -59,17 +62,19 @@ module('Integration | Adapter | intention', function(hooks) { const adapter = this.owner.lookup('adapter:intention'); const client = this.owner.lookup('service:client/http'); const request = client.url.bind(client); - const expected = `PUT /v1/connect/intentions/exact?source=SourceNS%2FSourceName&destination=DestinationNS%2FDestinationName&dc=${dc}`; + const expected = `PUT /v1/connect/intentions/exact?source=SourcePartition%2FSourceNS%2FSourceName&destination=DestinationPartition%2FDestinationNS%2FDestinationName&dc=${dc}`; const actual = adapter .requestForCreateRecord( request, {}, { Datacenter: dc, - SourceNS: 'SourceNS', SourceName: 'SourceName', - DestinationNS: 'DestinationNS', DestinationName: 'DestinationName', + SourceNS: 'SourceNS', + DestinationNS: 'DestinationNS', + SourcePartition: 'SourcePartition', + DestinationPartition: 'DestinationPartition', } ) .split('\n')[0]; @@ -79,17 +84,19 @@ module('Integration | Adapter | intention', function(hooks) { const adapter = this.owner.lookup('adapter:intention'); const client = this.owner.lookup('service:client/http'); const request = client.url.bind(client); - const expected = `PUT /v1/connect/intentions/exact?source=SourceNS%2FSourceName&destination=DestinationNS%2FDestinationName&dc=${dc}`; + const expected = `PUT /v1/connect/intentions/exact?source=SourcePartition%2FSourceNS%2FSourceName&destination=DestinationPartition%2FDestinationNS%2FDestinationName&dc=${dc}`; const actual = adapter .requestForUpdateRecord( request, {}, { Datacenter: dc, - SourceNS: 'SourceNS', SourceName: 'SourceName', - DestinationNS: 'DestinationNS', DestinationName: 'DestinationName', + SourceNS: 'SourceNS', + DestinationNS: 'DestinationNS', + SourcePartition: 'SourcePartition', + DestinationPartition: 'DestinationPartition', } ) .split('\n')[0]; @@ -99,17 +106,19 @@ module('Integration | Adapter | intention', function(hooks) { const adapter = this.owner.lookup('adapter:intention'); const client = this.owner.lookup('service:client/http'); const request = client.url.bind(client); - const expected = `DELETE /v1/connect/intentions/exact?source=SourceNS%2FSourceName&destination=DestinationNS%2FDestinationName&dc=${dc}`; + const expected = `DELETE /v1/connect/intentions/exact?source=SourcePartition%2FSourceNS%2FSourceName&destination=DestinationPartition%2FDestinationNS%2FDestinationName&dc=${dc}`; const actual = adapter .requestForDeleteRecord( request, {}, { Datacenter: dc, - SourceNS: 'SourceNS', SourceName: 'SourceName', - DestinationNS: 'DestinationNS', DestinationName: 'DestinationName', + SourceNS: 'SourceNS', + DestinationNS: 'DestinationNS', + SourcePartition: 'SourcePartition', + DestinationPartition: 'DestinationPartition', } ) .split('\n')[0]; diff --git a/ui/packages/consul-ui/tests/integration/serializers/intention-test.js b/ui/packages/consul-ui/tests/integration/serializers/intention-test.js index d36c725bcc..5e78a07cf5 100644 --- a/ui/packages/consul-ui/tests/integration/serializers/intention-test.js +++ b/ui/packages/consul-ui/tests/integration/serializers/intention-test.js @@ -26,7 +26,7 @@ module('Integration | Serializer | intention', function(hooks) { // refactored out our Serializer this can go Namespace: nspace, Partition: partition, - uid: `["${partition}","${nspace}","${dc}","${item.SourceNS}:${item.SourceName}:${item.DestinationNS}:${item.DestinationName}"]`, + uid: `["${partition}","${nspace}","${dc}","${item.SourcePartition}:${item.SourceNS}:${item.SourceName}:${item.DestinationPartition}:${item.DestinationNS}:${item.DestinationName}"]`, }) ); const actual = serializer.respondForQuery( @@ -55,10 +55,12 @@ module('Integration | Serializer | intention', function(hooks) { url: `/v1/connect/intentions/${id}?dc=${dc}`, }; const item = { - SourceNS: 'SourceNS', SourceName: 'SourceName', - DestinationNS: 'DestinationNS', DestinationName: 'DestinationName', + SourceNS: 'SourceNS', + DestinationNS: 'DestinationNS', + SourcePartition: 'SourcePartition', + DestinationPartition: 'DestinationPartition', }; return get(request.url).then(function(payload) { payload = { @@ -76,7 +78,7 @@ module('Integration | Serializer | intention', function(hooks) { // refactored out our Serializer this can go Namespace: nspace, Partition: partition, - uid: `["${partition}","${nspace}","${dc}","${item.SourceNS}:${item.SourceName}:${item.DestinationNS}:${item.DestinationName}"]`, + uid: `["${partition}","${nspace}","${dc}","${item.SourcePartition}:${item.SourceNS}:${item.SourceName}:${item.DestinationPartition}:${item.DestinationNS}:${item.DestinationName}"]`, }); const actual = serializer.respondForQueryRecord( function(cb) { diff --git a/ui/packages/consul-ui/tests/unit/abilities/-test.js b/ui/packages/consul-ui/tests/unit/abilities/-test.js new file mode 100644 index 0000000000..e3ac70d9f6 --- /dev/null +++ b/ui/packages/consul-ui/tests/unit/abilities/-test.js @@ -0,0 +1,65 @@ +/* globals requirejs */ +import { module, test } from 'qunit'; +import { setupTest } from 'ember-qunit'; + +module('Unit | Ability | *', function(hooks) { + setupTest(hooks); + + // Replace this with your real tests. + test('it exists', function(assert) { + const abilities = Object.keys(requirejs.entries) + .filter(key => key.indexOf('/abilities/') !== -1) + .map(key => key.split('/').pop()) + .filter(item => item !== '-test'); + abilities.forEach(item => { + const ability = this.owner.factoryFor(`ability:${item}`).create(); + [true, false].forEach(bool => { + const permissions = this.owner.lookup(`service:repository/permission`); + ability.permissions = { + has: _ => bool, + permissions: bool ? ['more-than-zero'] : [], + generate: function() { + return permissions.generate(...arguments); + }, + }; + ['Create', 'Read', 'Update', 'Delete', 'Write', 'List'].forEach(perm => { + switch (item) { + case 'permission': + ability.item = { + ID: bool ? 'not-anonymous' : 'anonymous', + }; + break; + case 'acl': + ability.item = { + ID: bool ? 'not-anonymous' : 'anonymous', + }; + break; + case 'token': + ability.item = { + AccessorID: 'not-anonymous', + }; + ability.token = { + AccessorID: bool ? 'different-to-item' : 'not-anonymous', + }; + break; + case 'nspace': + case 'partition': + ability.item = { + ID: bool ? 'not-default' : 'default', + }; + break; + case 'kv': + // TODO: We currently hardcode KVs to always be true + assert.equal(true, ability[`can${perm}`], `Expected ${item}.can${perm} to be true`); + return; + } + assert.equal( + bool, + ability[`can${perm}`], + `Expected ${item}.can${perm} to be ${bool ? 'true' : 'false'}` + ); + }); + }); + }); + }); +}); diff --git a/website/content/docs/agent/options.mdx b/website/content/docs/agent/options.mdx index fb51b5ec09..7ff7b1ef29 100644 --- a/website/content/docs/agent/options.mdx +++ b/website/content/docs/agent/options.mdx @@ -61,9 +61,8 @@ The options below are all specified on the command-line. address is advertised. However, in some cases, there may be a routable address that cannot be bound. This flag enables gossiping a different address to support this. If this address is not routable, the node will be in a constant flapping - state as other nodes will treat the non-routability as a failure. In Consul 1.0 - and later this can be set to a [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) - template. + state as other nodes will treat the non-routability as a failure. In Consul 1.1.0 and later this can be dynamically defined with a [go-sockaddr] + template that is resolved at runtime. - `-advertise-wan` ((#\_advertise-wan)) - The advertise WAN address is used to change the address that we advertise to server nodes joining through the WAN. @@ -73,7 +72,8 @@ The options below are all specified on the command-line. and private datacenters. This flag enables server nodes gossiping through the public network for the WAN while using private VLANs for gossiping to each other and their client agents, and it allows client agents to be reached at this address when being - accessed from a remote datacenter if the remote datacenter is configured with [`translate_wan_addrs`](#translate_wan_addrs). In Consul 1.0 and later this can be set to a [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) template + accessed from a remote datacenter if the remote datacenter is configured with [`translate_wan_addrs`](#translate_wan_addrs). In Consul 1.1.0 and later this can be dynamically defined with a [go-sockaddr] + template that is resolved at runtime. - `-bootstrap` ((#\_bootstrap)) - This flag is used to control if a server is in "bootstrap" mode. It is important that no more than one server **per** datacenter @@ -99,9 +99,8 @@ The options below are all specified on the command-line. `"[::]"`, Consul will [advertise](/docs/agent/options#_advertise) the public IPv6 address. If there are multiple public IPv6 addresses available, Consul will exit with an error at startup. Consul uses both TCP and UDP and the same port for - both. If you have any firewalls, be sure to allow both protocols. In Consul 1.0 - and later this can be set to a [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) - template that needs to resolve to a single address. Some example templates: + both. If you have any firewalls, be sure to allow both protocols. In Consul 1.1.0 and later this can be dynamically defined with a [go-sockaddr] + template that must resolve at runtime to a single address. Some example templates: ```shell # Using address within a specific CIDR @@ -121,17 +120,15 @@ The options below are all specified on the command-line. - `-serf-wan-bind` ((#\_serf_wan_bind)) - The address that should be bound to for Serf WAN gossip communications. By default, the value follows the same rules as [`-bind` command-line flag](#_bind), and if this is not specified, the `-bind` - option is used. This is available in Consul 0.7.1 and later. In Consul 1.0 and - later this can be set to a [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) - template + option is used. This is available in Consul 0.7.1 and later. In Consul 1.1.0 and later this can be dynamically defined with a [go-sockaddr] + template that is resolved at runtime. - `-serf-lan-bind` ((#\_serf_lan_bind)) - The address that should be bound to for Serf LAN gossip communications. This is an IP address that should be reachable by all other LAN nodes in the cluster. By default, the value follows the same rules as [`-bind` command-line flag](#_bind), and if this is not specified, the `-bind` - option is used. This is available in Consul 0.7.1 and later. In Consul 1.0 and - later this can be set to a [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) - template + option is used. This is available in Consul 0.7.1 and later. In Consul 1.1.0 and later this can be dynamically defined with a [go-sockaddr] + template that is resolved at runtime. - `-check_output_max_size` - Override the default limit of 4k for maximum size of checks, this is a positive value. By limiting this @@ -142,7 +139,7 @@ The options below are all specified on the command-line. - `-client` ((#\_client)) - The address to which Consul will bind client interfaces, including the HTTP and DNS servers. By default, this is "127.0.0.1", allowing only loopback connections. In Consul 1.0 and later this can be set to - a space-separated list of addresses to bind to, or a [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) + a space-separated list of addresses to bind to, or a [go-sockaddr] template that can potentially resolve to multiple addresses. - `-config-file` ((#\_config_file)) - A configuration file to load. For @@ -299,9 +296,12 @@ The options below are all specified on the command-line. By default, the agent won't join any nodes when it starts up. Note that using [`retry_join`](#retry_join) could be more appropriate to help mitigate node startup race conditions when automating a Consul cluster deployment. - In Consul 1.1.0 and later this can be set to a - [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) - template + In Consul 1.1.0 and later this can be dynamically defined with a + [go-sockaddr] + template that is resolved at runtime. + + If using Enterprise network segments, see [additional documentation on + joining a client to a segment](/docs/enterprise/network-segments#join_a_client_to_a_segment). - `-retry-join` ((#\_retry_join)) - Similar to [`-join`](#_join) but allows retrying a join until it is successful. Once it joins successfully to a member in a list of members @@ -309,15 +309,23 @@ The options below are all specified on the command-line. membership via gossip. This is useful for cases where you know the address will eventually be available. This option can be specified multiple times to specify multiple agents to join. The value can contain IPv4, IPv6, or DNS - addresses. In Consul 1.1.0 and later this can be set to a - [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) - template. If Consul is running on the non-default Serf LAN port, the port must + addresses. IPv6 must use the "bracketed" syntax. If multiple values + are given, they are tried and retried in the order listed until the first + succeeds. + + In Consul 1.1.0 and later this can be dynamically defined with a + [go-sockaddr] + template that is resolved at runtime. + + If Consul is running on the non-default Serf LAN port, the port must be specified in the join address, or configured as the agent's default Serf port using the [`ports.serf_lan`](#serf_lan_port) configuration option or [`-serf-lan-port`](#_serf_lan_port) command line flag. - IPv6 must use the "bracketed" syntax. If multiple values - are given, they are tried and retried in the order listed until the first - succeeds. Here are some examples: + + If using network segments (Enterprise), see [additional documentation on + joining a client to a segment](/docs/enterprise/network-segments#join_a_client_to_a_segment). + + Here are some examples of using `-retry-join`: ```shell # Using a DNS entry @@ -369,18 +377,16 @@ The options below are all specified on the command-line. startup will fail. By default, the agent won't [`-join-wan`](#_join_wan) any nodes when it starts up. - In Consul 1.1.0 and later this can be set to a - [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) - template. + In Consul 1.1.0 and later this can be dynamically defined with a [go-sockaddr] + template that is resolved at runtime. - `-retry-join-wan` ((#\_retry_join_wan)) - Similar to [`retry-join`](#_retry_join) but allows retrying a wan join if the first attempt fails. This is useful for cases where we know the address will become available eventually. As of Consul 0.9.3 [Cloud Auto-Joining](#cloud-auto-joining) is supported as well. - In Consul 1.1.0 and later this can be set to a - [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) - template + In Consul 1.1.0 and later this can be dynamically defined with a [go-sockaddr] + template that is resolved at runtime. - `-retry-interval-wan` ((#\_retry_interval_wan)) - Time to wait between [`-join-wan`](#_join_wan) attempts. Defaults to 30s. @@ -435,7 +441,7 @@ The options below are all specified on the command-line. but allows retrying discovery of fallback addresses for the mesh gateways in the primary datacenter if the first attempt fails. This is useful for cases where we know the address will become available eventually. [Cloud Auto-Joining](#cloud-auto-joining) - is supported as well as [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) + is supported as well as [go-sockaddr] templates. This was added in Consul 1.8.0. - `-raft-protocol` ((#\_raft_protocol)) - This controls the internal version @@ -453,10 +459,11 @@ The options below are all specified on the command-line. - `-segment` ((#\_segment)) - This flag is used to set the name of the network segment the agent belongs to. An agent can only join and - communicate with other agents within its network segment. Review the [Network Segments - tutorial](https://learn.hashicorp.com/tutorials/consul/network-partition-datacenters) for - more details. By default, this is an empty string, which is the default network - segment. + communicate with other agents within its network segment. Ensure the [join + operation uses the correct port for this segment](/docs/enterprise/network-segments#join_a_client_to_a_segment). + Review the [Network Segments documentation](/docs/enterprise/network-segments) + for more details. By default, this is an empty string, which is the `` + network segment. - `-serf-lan-allowed-cidrs` ((#\_serf_lan_allowed_cidrs)) - The Serf LAN allowed CIDRs allow to accept incoming connections for Serf only from several networks (multiple values are supported). @@ -777,7 +784,7 @@ Valid time units are 'ns', 'us' (or 'µs'), 'ms', 's', 'm', 'h'." - `addresses` - This is a nested object that allows setting bind addresses. In Consul 1.0 and later these can be set to a space-separated list - of addresses to bind to, or a [go-sockaddr](https://godoc.org/github.com/hashicorp/go-sockaddr/template) template that can potentially resolve to multiple addresses. + of addresses to bind to, or a [go-sockaddr] template that can potentially resolve to multiple addresses. `http`, `https` and `xds` all support binding to a Unix domain socket. A socket can be specified in the form `unix:///path/to/socket`. A new domain @@ -821,6 +828,7 @@ Valid time units are 'ns', 'us' (or 'µs'), 'ms', 's', 'm', 'h'." `reconnect_timeout` setting when determining when this node may be removed from the cluster. - `serf_lan` ((#serf_lan_bind)) Equivalent to the [`-serf-lan-bind` command-line flag](#_serf_lan_bind). + This is an IP address, not to be confused with [`ports.serf_lan`](#serf_lan_port). - `serf_lan_allowed_cidrs` ((#serf_lan_allowed_cidrs)) Equivalent to the [`-serf-lan-allowed-cidrs` command-line flag](#_serf_lan_allowed_cidrs). @@ -1849,9 +1857,9 @@ bind_addr = "{{ GetPrivateInterfaces | include \"network\" \"10.0.0.0/8\" | attr - `segment` - Equivalent to the [`-segment` command-line flag](#_segment). -- `segments` - This is a list of nested objects - that allows setting the bind/advertise information for network segments. This can - only be set on servers. Review the [Network Segments tutorial](https://learn.hashicorp.com/tutorials/consul/network-partition-datacenters) +- `segments` - (Server agents only) This is a list of nested objects + that specifies user-defined network segments, not including the `` segment, which is + created automatically. Review the [Network Segments documentation](/docs/enterprise/network-segments) for more details. - `name` ((#segment_name)) - The name of the segment. Must be a string @@ -2385,3 +2393,7 @@ items which are reloaded include: - TLS Configuration - Please be aware that this is currently limited to reload a configuration that is already TLS enabled. You cannot enable or disable TLS only with reloading. - Watches + + + +[go-sockaddr]: https://godoc.org/github.com/hashicorp/go-sockaddr/template diff --git a/website/content/docs/connect/config-entries/service-intentions.mdx b/website/content/docs/connect/config-entries/service-intentions.mdx index f0b55d7122..b3bc3981c2 100644 --- a/website/content/docs/connect/config-entries/service-intentions.mdx +++ b/website/content/docs/connect/config-entries/service-intentions.mdx @@ -355,7 +355,7 @@ spec: { name: 'Name', description: - "The name of the destination service for all intentions defined in this config entry. This may be set to the wildcard character (`*`) to match all services that don't otherwise have intentions defined.", + "The name of the destination service for all intentions defined in this config entry. This may be set to the wildcard character (`*`) to match all services that don't otherwise have intentions defined. Wildcard intentions cannot be used when defining L7 [`Permissions`](/docs/connect/config-entries/service-intentions#permissions).", type: 'string: ', yaml: false, }, @@ -364,7 +364,7 @@ spec: type: `string: "default"`, enterprise: true, description: - "Specifies the namespaces the config entry will apply to. This may be set to the wildcard character (`*`) to match all services in all namespaces that don't otherwise have intentions defined.", + "Specifies the namespaces the config entry will apply to. This may be set to the wildcard character (`*`) to match all services in all namespaces that don't otherwise have intentions defined. Wildcard intentions cannot be used when defining L7 [`Permissions`](/docs/connect/config-entries/service-intentions#permissions).", yaml: false, }, { @@ -398,7 +398,7 @@ spec: hcl: false, type: 'string: ', description: - "The name of the destination service for all intentions defined in this config entry. This may be set to the wildcard character (`*`) to match all services that don't otherwise have intentions defined.", + "The name of the destination service for all intentions defined in this config entry. This may be set to the wildcard character (`*`) to match all services that don't otherwise have intentions defined. Wildcard intentions cannot be used when defining L7 [`Permissions`](/docs/connect/config-entries/service-intentions#permissions).", }, { name: 'namespace', @@ -406,7 +406,7 @@ spec: enterprise: true, type: 'string: ', description: - "Specifies the namespaces the config entry will apply to. This may be set to the wildcard character (`*`) to match all services in all namespaces that don't otherwise have intentions defined. If not set, the namespace used will depend on the `connectInject.consulNamespaces` configuration. See [ServiceIntentions Special Case (Enterprise)](/docs/k8s/crds#serviceintentions-special-case-enterprise) for more details.", + "Specifies the namespaces the config entry will apply to. This may be set to the wildcard character (`*`) to match all services in all namespaces that don't otherwise have intentions defined. If not set, the namespace used will depend on the `connectInject.consulNamespaces` configuration. See [ServiceIntentions Special Case (Enterprise)](/docs/k8s/crds#serviceintentions-special-case-enterprise) for more details. Wildcard intentions cannot be used when defining L7 [`Permissions`](/docs/connect/config-entries/service-intentions#permissions).", }, ], }, @@ -470,7 +470,9 @@ spec: provided permissions in this intention will be subject to the default intention behavior is defined by the default [ACL policy](/docs/agent/options#acl_default_policy).

    This should be omitted for an L4 intention as it is mutually exclusive with - the \`Action\` field.`, + the \`Action\` field.

    + Setting \`Permissions\` is not valid if a wildcard is used for the \`Name\` or \`Namespace\` because they can only be + applied to services with a compatible protocol.`, yaml: `The list of all [additional L7 attributes](#intentionpermission) that extend the intention match criteria.

    Permission precedence is applied top to bottom. For any given request the first permission to match in the list is terminal and stops further @@ -478,7 +480,9 @@ spec: provided permissions in this intention will be subject to the default intention behavior is defined by the default [ACL policy](/docs/agent/options#acl_default_policy).

    This should be omitted for an L4 intention as it is mutually exclusive with - the \`action\` field.`, + the \`action\` field.

    + Setting \`permissions\` is not valid if a wildcard is used for the \`spec.destination.name\` or \`spec.destination.namespace\` + because they can only be applied to services with a compatible protocol.`, }, }, { diff --git a/website/content/docs/connect/gateways/mesh-gateway/index.mdx b/website/content/docs/connect/gateways/mesh-gateway/index.mdx index 2622a06760..dd747c5c99 100644 --- a/website/content/docs/connect/gateways/mesh-gateway/index.mdx +++ b/website/content/docs/connect/gateways/mesh-gateway/index.mdx @@ -61,7 +61,8 @@ receive incoming traffic even if that traffic has passed through a gateway. ## Modes of Operation Each upstream of a Connect proxy can be configured to be routed through a mesh gateway. Depending on -your network, the proxy's connection to the gateway can happen in one of the following modes: +your network, the proxy's connection to the gateway can happen in one of the following modes +illustrated in the diagram above: - `local` - In this mode the Connect proxy makes its outbound connection to a gateway running in the same datacenter. That gateway is then responsible for ensuring the data gets forwarded along to diff --git a/website/content/docs/connect/gateways/mesh-gateway/wan-federation-via-mesh-gateways.mdx b/website/content/docs/connect/gateways/mesh-gateway/wan-federation-via-mesh-gateways.mdx index e892c81622..eca396d927 100644 --- a/website/content/docs/connect/gateways/mesh-gateway/wan-federation-via-mesh-gateways.mdx +++ b/website/content/docs/connect/gateways/mesh-gateway/wan-federation-via-mesh-gateways.mdx @@ -38,6 +38,8 @@ Operators looking to simplify their WAN deployment and minimize the exposed security surface area can elect to join these datacenters together using [mesh gateways](/docs/connect/gateways/mesh-gateway) to do so. +![Mesh Gateway Architecture](/img/mesh-gateways.png) + ## Architecture There are two main kinds of communication that occur over the WAN link spanning diff --git a/website/content/docs/connect/proxies/built-in.mdx b/website/content/docs/connect/proxies/built-in.mdx index 21b84d42cb..c37c0e94fa 100644 --- a/website/content/docs/connect/proxies/built-in.mdx +++ b/website/content/docs/connect/proxies/built-in.mdx @@ -32,8 +32,6 @@ for the built-in proxy. "config": { "bind_address": "0.0.0.0", "bind_port": 20000, - "tcp_check_address": "192.168.0.1", - "disable_tcp_check": false, "local_service_address": "127.0.0.1:1234", "local_connect_timeout_ms": 1000, "handshake_timeout_ms": 10000, @@ -64,19 +62,6 @@ All fields are optional with a reasonable default. By default the range is [20000, 20255] and the port is selected at random from that range. -- `tcp_check_address` - The address the agent will - run a [TCP health check](/docs/agent/checks) against. By default this is the same - as the proxy's [bind address](#bind_address) except if the bind address is `0.0.0.0` - or `[::]` in which case this defaults to `127.0.0.1` and assumes the agent can - dial the proxy over loopback. For more complex configurations where agent and proxy - communicate over a bridge for example, this configuration can be used to specify - a different _address_ (but not port) for the agent to use for health checks if - it can't talk to the proxy over localhost or its publicly advertised port. The - check always uses the same port that the proxy is bound to. - -- `disable_tcp_check` - If true, this disables a - TCP check being setup for the proxy. Default is false. - - `local_service_address`- The `[address]:port` that the proxy should use to connect to the local application instance. By default it assumes `127.0.0.1` as the address and takes the port from the service definition's diff --git a/website/content/docs/enterprise/network-segments.mdx b/website/content/docs/enterprise/network-segments.mdx index f46e5e319a..001cb6f7ee 100644 --- a/website/content/docs/enterprise/network-segments.mdx +++ b/website/content/docs/enterprise/network-segments.mdx @@ -11,19 +11,33 @@ description: |- This feature requires{' '} Consul Enterprise{' '} - with the Global Visibility, Routing, and Scale module. + version 0.9.3+ with the Global Visibility, Routing, and Scale module. -Consul Network Segments enables operators to create separate LAN gossip segments -in one Consul cluster. Agents in a segment are only able to join and communicate -with other agents in its network segment. This functionality is useful for -clusters that have multiple tenants that should not be able to communicate -with each other. +Consul requires full connectivity between all agents (servers and clients) in a +[datacenter](/docs/agent/options#_datacenter) within a given +LAN gossip pool. By default, all Consul agents will be a part of one shared Serf LAN +gossip pool known as the `` network segment, thus requiring full mesh +connectivity within the datacenter. -To get started with network segments you can review the tutorial on HashiCorp Learn for -[Network Segments](https://learn.hashicorp.com/tutorials/consul/network-partition-datacenters). +![Consul datacenter default agent connectivity: one network segment](/img/network-segments/consul-network-segments-single.png) -~> **Note:** Prior to Consul 1.7.3, a Consul agent configured with too many network segments may not be able to start due to [limitations](https://learn.hashicorp.com/tutorials/consul/network-partition-datacenters#network-segments-limitations) in Serf. +In some environments, full connectivity between all agents is not possible—known as a +"segmented network". This is usually the result of business policies enforced through +network rules or firewalls. To use Consul in a segmented network, you must break up +the LAN gossip pool along network communication boundaries into separate "network +segments". Network segments are isolated LAN gossip pools that only require full +connectivity between agent members on the same segment. + +![Consul datacenter agent connectivity with network segments](/img/network-segments/consul-network-segments-multiple.png) + +To get started with network segments you can review the tutorial on HashiCorp +Learn for [Network Segments](https://learn.hashicorp.com/tutorials/consul/network-partition-datacenters). + +-> **Info:** Network segments enable you to operate a Consul datacenter without full +mesh (LAN) connectivity between agents. To federate multiple Consul datacenters +without full mesh (WAN) connectivity between all server agents in all datacenters, +use [Network Areas (Enterprise)](/docs/enterprise/federation). # Consul Networking Models @@ -52,3 +66,171 @@ among themselves, and use Serf to maintain a shared view of the members of the pool for different purposes, like finding a Consul server in a local cluster, or finding servers in a remote cluster. A **segmented** LAN Gossip Pool limits a group of agents to only connect with the agents in its segment. + +# Network Segments Configuration + +## Server Configuration + +Server agents are members of all segments. The datacenter includes a `` +segment, as well as additional segments defined in the +[`segments`](/docs/agent/options#segments) server agent configuration option. +Each additional segment is defined by: + +- a non-empty name +- a unique port +- optionally, a custom bind and advertise address for the additional segment's + Serf LAN listener on the server + +~> **Note:** Prior to Consul 1.7.3, a Consul server agent configured with too +many network segments may not be able to start due to [limitations](https://learn.hashicorp.com/tutorials/consul/network-partition-datacenters#network-segments-limitations) +in Serf. + +### Example Server Configuration + +The following server agent configuration will create two user-defined network +segments: `alpha` and `beta`. + + + +```hcl +segments = [ + { + name = "alpha" + bind = "{{GetPrivateIP}}" + advertise = "{{GetPrivateIP}}" + port = 8303 + }, + { + name = "beta" + bind = "{{GetPrivateIP}}" + advertise = "{{GetPrivateIP}}" + port = 8304 + } +] +``` + +```json +{ + "segments": [ + { + "name": "alpha", + "bind": "{{GetPrivateIP}}", + "advertise": "{{GetPrivateIP}}", + "port": 8303 + }, + { + "name": "beta", + "bind": "{{GetPrivateIP}}", + "advertise": "{{GetPrivateIP}}", + "port": 8304 + } + ] +} +``` + + + +The server [agent configuration](/docs/agent/options) options relevant to network +segments are: + +- [`ports.serf_lan`](/docs/agent/options#serf_lan_port): The Serf LAN port on this server + for the `` network segment's gossip pool. +- [`segments`](/docs/agent/options#segments): A list of user-defined network segments + on this server, including their names and Serf LAN ports. + +## Client Configuration + +Each client agent can only be a member of one segment at a time. This will be the +`` segment unless otherwise specified in the agent's +[`segment`](/docs/agent/options.html#_segment) agent configuration option. + +### Join a Client to a Segment ((#join_a_client_to_a_segment)) + +For a client agent to [join](/commands/join) the Consul +datacenter, it must connect to another agent (client or server) within its +configured segment. + + + + +Clients A and B specify the same segment S. Client B is already joined to the segment S +LAN gossip pool. Client A wants to join via Client B. In order to do so, Client A +must connect to Client B's configured [Serf LAN port](/docs/agent/options#serf_lan_port). + + + + +Client A specifies segment S and wants to join the segment S gossip pool via Server 1. +In order to do so, Client A must connect to Server 1's configured [Serf LAN port +for segment S](/docs/agent/options#segment_port). + + + + +There are several methods to specify the port used by the join operation, listed in order +of precedence: + +1. **Specify an explicit port in the join address**. This can be done at the CLI when starting + the agent (e.g., `consul agent -retry-join "client-b-address:8303"`), or in the agent's + configuration using the [retry-join option](/docs/agent/options#retry_join). This method + is not compatible with [cloud auto-join](/docs/install/cloud-auto-join#auto-join-with-network-segments). + +2. **Specify an alternate Serf LAN port for the agent**. This can be done at the CLI when starting + the agent (e.g., `consul agent -retry-join "client-b-address" -serf-lan-port 8303`), or in + the agent's configuration using the [serf_lan](/docs/agent/options#serf_lan_port) option. + When a Serf LAN port is not explicitly specified in the join address, the agent will attempt to + join the target host at the Serf LAN port specified in CLI or agent configuration. + +3. **Use the default Serf LAN port (8301)**. The agent will attempt to join the target host + on port 8301. + +-> Agents within a segment can use different port numbers for their Serf LAN port. +For example, on the `` segment, Server S can use port 8301, Client A +can use 8303, and Client B can use 8304. However, if an agent wishes to join a +segment via an agent that uses a different port number, the target agent's Serf LAN +port must be specified in the join address (method 1 above). + +### Example Client Configuration + +The following client agent configuration will cause the agent to: + +- Open a Serf LAN listener port on 8303. +- Attempt to join the cluster via servers on port 8303 (since an alternate port is not + specified in the `retry_join` addresses). + + + +```hcl +node_name = "consul-client1" +retry_join = ["consul-server1", "consul-server2", "consul-server3"] +segment = "alpha" +ports = { + serf_lan = 8303 +} +``` + +```json +{ + "node_name": "consul-client1", + "retry_join": ["consul-server1", "consul-server2", "consul-server3"], + "segment": "alpha", + "ports": { + "serf_lan": 8303 + } +} +``` + + + +The client [agent configuration](/docs/agent/options) options relevant to network +segments are: + +- [`segment`](/docs/agent/options#segment-2): The name of the network segment this + client agent belongs to. +- [`ports.serf_lan`](/docs/agent/options#serf_lan_port): + Serf LAN port for the above segment on this client. This is not required + to match the configured Serf LAN port for other agents on this segment. +- [`retry_join`](/docs/agent/options#retry_join) or + [`start_join`](/docs/agent/options#start_join): A list of agent addresses to join + when starting. Ensure the correct Serf LAN port for this segment is used when joining + the LAN gossip pool using one of the [available configuration methods](#join_a_client_to_a_segment). diff --git a/website/content/docs/k8s/connect/terminating-gateways.mdx b/website/content/docs/k8s/connect/terminating-gateways.mdx index 800b5b3912..c98002c63a 100644 --- a/website/content/docs/k8s/connect/terminating-gateways.mdx +++ b/website/content/docs/k8s/connect/terminating-gateways.mdx @@ -73,7 +73,7 @@ $ export CONSUL_HTTP_SSL_VERIFY=false If ACLs are enabled also set: ```shell-session -$ export CONSUL_HTTP_TOKEN=$(kubectl get secret consul-bootstrap-acl-token -o jsonpath={.data.token} | base64 --decode) +$ export CONSUL_HTTP_TOKEN=$(kubectl get secret consul-bootstrap-acl-token --template='{{.data.token | base64decode }}') ``` ## Register external services with Consul diff --git a/website/content/docs/k8s/index.mdx b/website/content/docs/k8s/index.mdx index ef208aac44..6fd424f0eb 100644 --- a/website/content/docs/k8s/index.mdx +++ b/website/content/docs/k8s/index.mdx @@ -11,7 +11,7 @@ description: >- # Kubernetes Consul has many integrations with Kubernetes. You can deploy Consul -to Kubernetes using the Helm chart, sync services between Consul and +to Kubernetes using the [Helm chart](/docs/k8s/installation/install#helm-chart-installation) or [Consul K8s CLIALPHA](/docs/k8s/installation/install#consul-k8s-cli-installation), sync services between Consul and Kubernetes, run Consul Connect Service Mesh, and more. This section documents the official integrations between Consul and Kubernetes. diff --git a/website/content/docs/k8s/installation/deployment-configurations/consul-enterprise.mdx b/website/content/docs/k8s/installation/deployment-configurations/consul-enterprise.mdx index 3ec152f5e8..38823f24a2 100644 --- a/website/content/docs/k8s/installation/deployment-configurations/consul-enterprise.mdx +++ b/website/content/docs/k8s/installation/deployment-configurations/consul-enterprise.mdx @@ -113,7 +113,7 @@ Then you have likely enabled ACLs. You need to specify your ACL token when running the `license get` command. First, assign the ACL token to the `CONSUL_HTTP_TOKEN` environment variable: ```shell-session -$ export CONSUL_HTTP_TOKEN=$(kubectl get secrets/hashicorp-consul-bootstrap-acl-token --template={{.data.token}} | base64 --decode) +$ export CONSUL_HTTP_TOKEN=$(kubectl get secrets/hashicorp-consul-bootstrap-acl-token --template='{{.data.token | base64decode }}') ``` Now the token will be used when running Consul commands: diff --git a/website/content/docs/k8s/installation/install.mdx b/website/content/docs/k8s/installation/install.mdx index 71068a087f..d15b480549 100644 --- a/website/content/docs/k8s/installation/install.mdx +++ b/website/content/docs/k8s/installation/install.mdx @@ -15,78 +15,75 @@ For pure-Kubernetes workloads, this enables Consul to also exist purely within Kubernetes. For heterogeneous workloads, Consul agents can join a server running inside or outside of Kubernetes. -This page starts with a large how-to section for various specific tasks. -To learn more about the general architecture of Consul on Kubernetes, scroll -down to the [architecture](/docs/k8s/installation/install#architecture) section. -If you would like to get hands-on experience testing Consul as a service mesh -for Kubernetes, check the guides in the [Getting Started with Consul service -mesh](https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy?utm_source=WEBSITE&utm_medium=WEB_IO&utm_offer=ARTICLE_PAGE&utm_content=DOCS) track. +You can install Consul on Kubernetes using the following methods: + +1. [Helm chart install](#helm-chart-installation) +1. [Consul K8s CLI install ALPHA.](#consul-k8s-cli-installation) + +Refer to the [architecture](/docs/k8s/installation/install#architecture) section to learn more about the general architecture of Consul on Kubernetes. +For a hands-on experience with Consul as a service mesh +for Kubernetes, follow the [Getting Started with Consul service +mesh](https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy?utm_source=WEBSITE&utm_medium=WEB_IO&utm_offer=ARTICLE_PAGE&utm_content=DOCS) tutorial. ## Helm Chart Installation The recommended way to run Consul on Kubernetes is via the [Helm chart](/docs/k8s/helm). This will install and configure all the necessary components to run Consul. The configuration enables you -to run just a server cluster, just a client cluster, or both. Using the Helm -chart, you can have a full Consul deployment up and running in minutes. +to run a server cluster, a client cluster, or both. Step-by-step tutorials for how to deploy Consul to Kubernetes, please see our [Deploy to Kubernetes](https://learn.hashicorp.com/collections/consul/kubernetes-deploy) -collection. This collection includes configuration caveats for single node deployments. +collection. This collection includes configuration caveats for single-node deployments. -While the Helm chart exposes dozens of useful configurations and automatically -sets up complex resources, it **does not automatically operate Consul.** -You are still responsible for learning how to monitor, backup, +The Helm chart exposes several useful configurations and automatically +sets up complex resources, but it **does not automatically operate Consul.** +You must still become familiar with how to monitor, backup, upgrade, etc. the Consul cluster. The Helm chart has no required configuration and will install a Consul -cluster with reasonable defaults out of the box. Prior to going to production, -it is highly recommended that you -[learn about the configuration options](/docs/k8s/helm#configuration-values). +cluster with default configurations. We strongly recommend [learning about the configuration options](/docs/k8s/helm#configuration-values) prior to going to production. ~> **Security Warning:** By default, the chart will install an insecure configuration of Consul. This provides a less complicated out-of-box experience for new users, -but is not appropriate for a production setup. It is highly recommended to use -a properly secured Kubernetes cluster or make sure that you understand and enable +but is not appropriate for a production setup. We strongly recommend using +a properly-secured Kubernetes cluster or making sure that you understand and enable the [recommended security features](/docs/internals/security). Currently, some of these features are not supported in the Helm chart and require additional manual configuration. ### Prerequisites -The Consul Helm chart works only with Helm 3. Install the latest version of the Helm CLI here: +The Consul Helm only supports Helm 3. Install the latest version of the Helm CLI here: [Installing Helm](https://helm.sh/docs/intro/install/). ### Installing Consul -Add the HashiCorp Helm Repository: +1. Add the HashiCorp Helm Repository: -```shell-session -$ helm repo add hashicorp https://helm.releases.hashicorp.com -"hashicorp" has been added to your repositories -``` + ```shell-session + $ helm repo add hashicorp https://helm.releases.hashicorp.com + "hashicorp" has been added to your repositories + ``` -Ensure you have access to the consul chart: +1. Verify that you have access to the consul chart: -```shell-session -$ helm search repo hashicorp/consul -NAME CHART VERSION APP VERSION DESCRIPTION -hashicorp/consul 0.32.0 1.10.0 Official HashiCorp Consul Chart -``` + ```shell-session + $ helm search repo hashicorp/consul + NAME CHART VERSION APP VERSION DESCRIPTION + hashicorp/consul 0.32.0 1.10.0 Official HashiCorp Consul Chart + ``` -Now you're ready to install Consul! To install Consul with the default -configuration using Helm 3 run: +1. Issue the following command to install Consul with the default configuration using Helm 3: -```shell-session -$ helm install consul hashicorp/consul --set global.name=consul -NAME: consul -... -``` + ```shell-session + $ helm install consul hashicorp/consul --set global.name=consul + NAME: consul + ... + ``` -_That's it._ The Helm chart does everything to set up a recommended -Consul-on-Kubernetes deployment. -In a couple minutes, a Consul cluster will be formed and a leader -elected and every node will have a running Consul agent. +The Helm chart does everything to set up a recommended Consul-on-Kubernetes deployment. +After installation, a Consul cluster will be formed, a leader will be elected, and every node will have a running Consul agent. ### Customizing Your Installation @@ -102,11 +99,11 @@ use the following config file: ```yaml global: - name: consul +name: consul connectInject: - enabled: true +enabled: true controller: - enabled: true +enabled: true ``` @@ -122,6 +119,45 @@ NAME: consul If you've already installed Consul and want to make changes, you'll need to run `helm upgrade`. See [Upgrading](/docs/k8s/operations/upgrading) for more details. +## Consul K8s CLI Installation + +You can install Consul on Kubernetes using the Consul K8s CLI tool. +The tool is currently availabe as an alpha release and is not recommended for production environments. + +1. Download and build the CLI as described in the [Consul K8s CLI reference](/docs/k8s/k8s-cli). +1. Issue the `install` subcommand to install Consul on Kubernetes: + + ```shell-session + consul-k8s install + ``` + + Refer to the [Consul K8s CLI reference](/docs/k8s/k8s-cli) for details about all commands and available options. + + If you did not set the `-auto-approve` option to `true`, you will be prompted to proceed with the installation if the pre-install checks pass. + + ```shell-session + ==> Pre-Install Checks + ✓ No existing installations found + ✓ No previous persistent volume claims found + ✓ No previous secrets found + + ==> Consul Installation Summary + Installation name: consul + Namespace: myns + Overrides: + connectInject: + enabled: true + global: + name: consul + server: + bootstrapExpect: 1 + replicas: 1 + + Proceed with installation? (y/n) + ``` + +1. Enter `y` to proceed. The pre-install checks may fail if existing `PersistentVolumeClaims` (PVC) are detected. Refer to the [uninstall instructions](/docs/k8s/operations/uninstall#uninstall-consul) for information about removing PVCs. + ## Viewing the Consul UI The Consul UI is enabled by default when using the Helm chart. @@ -161,7 +197,7 @@ to see all resources and make modifications. To retrieve the bootstrap token that has full permissions, run: ```shell-session -$ kubectl get secrets/consul-bootstrap-acl-token --template={{.data.token}} | base64 --decode +$ kubectl get secrets/consul-bootstrap-acl-token --template='{{.data.token | base64decode }}' e7924dd1-dc3f-f644-da54-81a73ba0a178% ``` diff --git a/website/content/docs/k8s/installation/multi-cluster/vms-and-kubernetes.mdx b/website/content/docs/k8s/installation/multi-cluster/vms-and-kubernetes.mdx index 9f1a7239a6..120edf2a28 100644 --- a/website/content/docs/k8s/installation/multi-cluster/vms-and-kubernetes.mdx +++ b/website/content/docs/k8s/installation/multi-cluster/vms-and-kubernetes.mdx @@ -35,15 +35,13 @@ The following sections detail how to export this data. 1. Retrieve the certificate authority cert: ```sh - kubectl get secrets/consul-ca-cert --template='{{index .data "tls.crt" }}' | - base64 --decode > consul-agent-ca.pem + kubectl get secrets/consul-ca-cert --template='{{index .data "tls.crt" | base64decode }}' > consul-agent-ca.pem ``` 1. And the certificate authority signing key: ```sh - kubectl get secrets/consul-ca-key --template='{{index .data "tls.key" }}' | - base64 --decode > consul-agent-ca-key.pem + kubectl get secrets/consul-ca-key --template='{{index .data "tls.key" | base64decode }}' > consul-agent-ca-key.pem ``` 1. With the `consul-agent-ca.pem` and `consul-agent-ca-key.pem` files you can diff --git a/website/content/docs/k8s/k8s-cli.mdx b/website/content/docs/k8s/k8s-cli.mdx new file mode 100644 index 0000000000..6dd71e894c --- /dev/null +++ b/website/content/docs/k8s/k8s-cli.mdx @@ -0,0 +1,110 @@ +--- +layout: docs +page_title: Consul K8s CLI Reference +description: >- + Consul K8s CLI is a tool for quickly installing and interacting with Consul on Kubernetes. +--- + +# Consul K8s CLI Reference + +Consul K8s CLI is a tool for quickly installing and interacting with Consul on Kubernetes. +This topic describes the commands, subcommands, and available options for using Consul K8s CLI. + +~> Consul K8s CLI is is currently availabe as an alpha release and is not recommended for production environments. + +## Download and Build the Binary + +1. Clone the [consul-k8s](https://github.com/hashicorp/consul-k8s/tree/cli-install/cli) project. +1. Navigate to the `consul-k8s/cli` directory and issue the following command to build the tool: + + ```shell-session + go build -o bin/consul-k8s + ``` + +1. (Optional) Move the binary to you `$PATH` for ease of use, e.g.: + + ```shell-session + mv bin/consul-k8s /usr/local/bin/consul-k8s + ``` + +## Usage + +Consul K8s CLI uses the following syntax: + +```shell-session +consul-k8s +``` + +## Subcommands + +You can use the following subcommands with `consul-k8s`. + +### `install` + +The `install` command installs Consul on Kubernetes. + +```shell-session +consul-k8s install +``` + +The following options are available. + +| Flag | Description | Default | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------- | +| `-auto-approve`                                     | Boolean value that enables you to skip the installation confirmation prompt. | `false` | Optional | +| `-dry-run` | Boolean value that validates the installation and returns a summary. | `false` | Optional | +| `-config-file` | String value that specifies the path to a file containing custom installation configurations, e.g., Consul Helm chart values file.
    You can use the `-config-file` flag multiple times to specify multiple files. | none | Optional | +| `-namespace` | String value that specifies the namespace of the Consul installation. | `consul` | Optional | +| `-preset` | String value that installs Consul based on a preset configuration. You can specify the following values:
    `demo`: Installs a single replica server with sidecar injection enabled; useful for testing service mesh functionality.
    `secure`: Installs a single replica server with sidecar injection, ACLs, and TLS enabled; useful for testing service mesh functionality. | Configuration of the Consul Helm chart. | Optional | +| `-set` | String value that enables you to set a customizeable value.
    You can use the `-set` flag multiple times to set multiple values.
    Consul Helm chart values are supported. | none | Optional | +| `-set-file` | String value that specifies the name of a file. The contents of the file will be used to set a customizeable value.
    You can use the `-set-file` flag multiple times to specify multiple files.
    Consul Helm chart values are supported. | none | Optional | +| `-set-string` | String value that enables you to set a customizeable string value.
    You can use the `-set-string` flag multiple times to specify multiple strings.
    Consul Helm chart values are supported. | none | Optional | +| `-timeout` | Specifies how long to wait for the installation process to complete before timing out. The value is specified with an integer and string value indicating a unit of time.
    The following units are supported:
    `ms` (milliseconds)
    `s` (seconds)
    `m` (minutes)
    In the following example, installation will timeout after one minute:
    `consul-k8s install -timeout 1m` | Optional | `10m` | +| `-wait` | Boolean value that determines if Consul should wait for resources in the installation to be ready before exiting the command. | Optional | `true` | + +See [Global Options](#global-options) for additional commands that you can use when installing Consul on Kubernetes. + +#### Example Command + +The following example command installs Consul according in the `myNS` namespace according to the `secure` preset. + +```shell-session +consul-k8s install -preset=secure -namespace=myNS +``` + +### `uninstall` + +The `uninstall` command removes Consul from Kubernetes. + +```shell-session +consul-k8s uninstall +``` + +The following options are available. + +| Flag | Description | Default | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------- | +| `-auto-approve`                                     | Boolean value that enables you to skip the removal confirmation prompt. | `false` | Optional | +| `-name` | String value for the name of the installation to remove. | none | Optional | +| `-namespace` | String value that specifies the namespace of the Consul installation to remove. | `consul` | Optional | +| `-timeout` | Specifies how long to wait for the removal process to complete before timing out. The value is specified with an integer and string value indicating a unit of time.
    The following units are supported:
    `ms` (milliseconds)
    `s` (seconds)
    `m` (minutes)
    `h` (hours)
    In the following example, removal will timeout after one minute:
    `consul-k8s uninstall -timeout 1m` | Optional | `10m` | +| `-wipe-data` | Boolan value that deletes PVCs and secrets associated with the Consul installation during installation.
    Data will be removed without a verification prompt if the `-auto-approve` flag is set to `true`. | `false`
    Instructions for removing data will be printed to the console. | Optional | + +See [Global Options](#global-options) for additional commands that you can use when uninstalling Consul from Kubernetes. + +#### Example Command + +The following example command immediately uninstalls Consul from the `my-ns` namespace with the name `my-consul` and removes PVCs and secrets associated with the installation without asking for verification: + +```shell-session +consul-k8s uninstall -namespace=my-ns -name=my-consul -wipe-data=true -auto-approve=true +``` + +## Global Options + +The following global options are available. + +| Flag | Description | Default | Required | +| ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------- | -------- | +| `-context`                   | String value that sets the Kubernetes context to use for Consul K8s CLI operations. | none | Optional | +| `-kubeconfig`
    Alias: `-c` | String value that specifies the path to the `kubeconfig` file.
    | none | Optional | diff --git a/website/content/docs/k8s/operations/uninstall.mdx b/website/content/docs/k8s/operations/uninstall.mdx index a07a2b1c06..f570b0e351 100644 --- a/website/content/docs/k8s/operations/uninstall.mdx +++ b/website/content/docs/k8s/operations/uninstall.mdx @@ -6,73 +6,92 @@ description: Uninstall Consul on Kubernetes # Uninstall Consul -Uninstalling Consul requires running `helm delete` **and** then manually cleaning -up some resources that Helm does not delete. +You can uninstall Consul using Helm commands or the Consul K8s CLI. - 1. First, run `helm delete`: +## Helm commands - ```shell-session - $ helm delete hashicorp - release "hashicorp" uninstalled - ``` +Run the `helm uninstall` **and** manually remove resources that Helm does not delete. - 2. After deleting the Helm release, you need to delete the `PersistentVolumeClaim`'s - for the persistent volumes that store Consul's data. These are not deleted by Helm due to a [bug](https://github.com/helm/helm/issues/5156). - To delete, run: +1. First, run `helm uninstall`: - ```shell-session - $ kubectl get pvc -l chart=consul-helm - NAME STATUS VOLUME CAPACITY ACCESS MODES STORAGECLASS AGE - data-default-hashicorp-consul-server-0 Bound pvc-32cb296b-1213-11ea-b6f0-42010a8001db 10Gi RWO standard 17m - data-default-hashicorp-consul-server-1 Bound pvc-32d79919-1213-11ea-b6f0-42010a8001db 10Gi RWO standard 17m - data-default-hashicorp-consul-server-2 Bound pvc-331581ea-1213-11ea-b6f0-42010a8001db 10Gi RWO standard 17m + ```shell-session + $ helm uninstall hashicorp + release "hashicorp" uninstalled + ``` - $ kubectl delete pvc -l chart=consul-helm - persistentvolumeclaim "data-default-hashicorp-consul-server-0" deleted - persistentvolumeclaim "data-default-hashicorp-consul-server-1" deleted - persistentvolumeclaim "data-default-hashicorp-consul-server-2" deleted - ``` +1. After deleting the Helm release, you need to delete the `PersistentVolumeClaim`'s + for the persistent volumes that store Consul's data. A [bug](https://github.com/helm/helm/issues/5156) in Helm prevents PVCs from being deleted. Issue the following commands: - ~> **NOTE:** This will delete **all** data stored in Consul and it can't be - recovered unless you've taken other backups. + ```shell-session + $ kubectl get pvc -l chart=consul-helm + NAME STATUS VOLUME CAPACITY ACCESS MODES STORAGECLASS AGE + data-default-hashicorp-consul-server-0 Bound pvc-32cb296b-1213-11ea-b6f0-42010a8001db 10Gi RWO standard 17m + data-default-hashicorp-consul-server-1 Bound pvc-32d79919-1213-11ea-b6f0-42010a8001db 10Gi RWO standard 17m + data-default-hashicorp-consul-server-2 Bound pvc-331581ea-1213-11ea-b6f0-42010a8001db 10Gi RWO standard 17m - 3. If installing with ACLs enabled, you will need to then delete the ACL secrets: + $ kubectl delete pvc -l chart=consul-helm + persistentvolumeclaim "data-default-hashicorp-consul-server-0" deleted + persistentvolumeclaim "data-default-hashicorp-consul-server-1" deleted + persistentvolumeclaim "data-default-hashicorp-consul-server-2" deleted + ``` - ```shell-session - $ kubectl get secret | grep consul | grep Opaque - consul-acl-replication-acl-token Opaque 1 41m - consul-bootstrap-acl-token Opaque 1 41m - consul-client-acl-token Opaque 1 41m - consul-connect-inject-acl-token Opaque 1 37m - consul-controller-acl-token Opaque 1 37m - consul-federation Opaque 4 41m - consul-mesh-gateway-acl-token Opaque 1 41m - ``` + ~> **NOTE:** This will delete **all** data stored in Consul and it can't be + recovered unless you've taken other backups. - 4. Ensure that the secrets you're about to delete are all created by Consul and not - created by someone else that happen to have the word `consul`: +1. If installing with ACLs enabled, you will need to then delete the ACL secrets: - ```shell-session - $ kubectl get secret | grep consul | grep Opaque | awk '{print $1}' | xargs kubectl delete secret - secret "consul-acl-replication-acl-token" deleted - secret "consul-bootstrap-acl-token" deleted - secret "consul-client-acl-token" deleted - secret "consul-connect-inject-acl-token" deleted - secret "consul-controller-acl-token" deleted - secret "consul-federation" deleted - secret "consul-mesh-gateway-acl-token" deleted - secret "consul-gossip-encryption-key" deleted - ``` + ```shell-session + $ kubectl get secret | grep consul | grep Opaque + consul-acl-replication-acl-token Opaque 1 41m + consul-bootstrap-acl-token Opaque 1 41m + consul-client-acl-token Opaque 1 41m + consul-connect-inject-acl-token Opaque 1 37m + consul-controller-acl-token Opaque 1 37m + consul-federation Opaque 4 41m + consul-mesh-gateway-acl-token Opaque 1 41m + ``` - 5. If installing with `tls.enabled` then there will be a `ServiceAccount` that is left behind: +1. Ensure that the secrets you're about to delete are all created by Consul and not + created by another user with the word `consul`. - ```shell-session - $ kubectl get serviceaccount consul-tls-init - NAME SECRETS AGE - consul-tls-init 1 47m - ``` + ```shell-session + $ kubectl get secret | grep consul | grep Opaque | awk '{print $1}' | xargs kubectl delete secret + secret "consul-acl-replication-acl-token" deleted + secret "consul-bootstrap-acl-token" deleted + secret "consul-client-acl-token" deleted + secret "consul-connect-inject-acl-token" deleted + secret "consul-controller-acl-token" deleted + secret "consul-federation" deleted + secret "consul-mesh-gateway-acl-token" deleted + secret "consul-gossip-encryption-key" deleted + ``` - ```shell-session - $ kubectl delete serviceaccount consul-tls-init - serviceaccount "consul-tls-init" deleted - ``` +1. If installing with `tls.enabled` then, run the following commands to delete the `ServiceAccount` left behind: + + ```shell-session + $ kubectl get serviceaccount consul-tls-init + NAME SECRETS AGE + consul-tls-init 1 47m + ``` + + ```shell-session + $ kubectl delete serviceaccount consul-tls-init + serviceaccount "consul-tls-init" deleted + ``` + +## Consul K8s CLI + +Issue the `consul-k8s uninstall` command to remove Consul on Kubernetes. You can specify the installation name, namespace, and data retention behavior using the applicable options. By default, the uninstallation preserves the secrets and PVCs that are provisioned by Consul on Kubernetes. + +```shell-session +$ consul-k8s uninstall +``` + + +In the following example, Consul will be uninstalled and the data removed without prompting you to verify the operations: + +```shell-session +$ consul-k8s uninstall -auto-approve=true -wipe-data=true +``` + +Refer to the [Consul K8s CLI reference](/docs/k8s/k8s-cli#uninstall) topic for details. diff --git a/website/data/alert-banner.js b/website/data/alert-banner.js index 62ffbfca2e..3613a73ce0 100644 --- a/website/data/alert-banner.js +++ b/website/data/alert-banner.js @@ -2,11 +2,12 @@ export const ALERT_BANNER_ACTIVE = true // https://github.com/hashicorp/web-components/tree/master/packages/alert-banner export default { - tag: 'Event', - url: 'https://hashiconf.com/global/?utm_campaign=22Q3_WW_HASHICONFGLOBAL_EVENT-USER&utm_source=CorpBanner&utm_medium=EVT&utm_offer=EVENT-USER', - text: 'Join us for HashiConf Global - product updates, technical sessions, workshops & more', - linkText: 'Register now', + tag: 'Oct 19-21', + url: + 'https://hashiconf.com/global/?utm_campaign=22Q3_WW_HASHICONFGLOBAL_EVENT-USER&utm_source=CorpBanner&utm_medium=EVT&utm_offer=EVENT-USER', + text: 'The countdown to HashiConf Global is on. View the full schedule now.', + linkText: 'View Schedule', // Set the expirationDate prop with a datetime string (e.g. '2020-01-31T12:00:00-07:00') // if you'd like the component to stop showing at or after a certain date - expirationDate: '2021-10-01T12:00:00-07:00', + expirationDate: '2021-10-19T12:00:00-07:00', } diff --git a/website/data/docs-nav-data.json b/website/data/docs-nav-data.json index 38e6f5d70f..2d60f8b851 100644 --- a/website/data/docs-nav-data.json +++ b/website/data/docs-nav-data.json @@ -359,7 +359,7 @@ "title": "Get Started", "routes": [ { - "title": "Install with Helm Chart", + "title": "Installing Consul on Kubernetes", "path": "k8s/installation/install" }, { @@ -552,6 +552,10 @@ { "title": "Helm Chart Configuration", "path": "k8s/helm" + }, + { + "title": "Consul K8s CLI Reference", + "path": "k8s/k8s-cli" } ] }, diff --git a/website/public/img/mesh-gateways.png b/website/public/img/mesh-gateways.png index b7858c692e..3b179619b4 100644 Binary files a/website/public/img/mesh-gateways.png and b/website/public/img/mesh-gateways.png differ diff --git a/website/public/img/mesh-gateways.svg b/website/public/img/mesh-gateways.svg new file mode 100755 index 0000000000..eccf660c0d --- /dev/null +++ b/website/public/img/mesh-gateways.svg @@ -0,0 +1,1671 @@ + + + + + + + + + + + + + + + + + + + DC1 + + + + | ON PREMISES + DC2 + + + + | CLOUD US-EAST-1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + LEADER + + + + LEADER + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + B + SERVICE + + + + A + SERVICE + + Cross-DC Communication (WAN Federation) Models + + + + + + MeshGateway.Mode = "none" + connect.enable_mesh_gateway_wan_federation=false + connect.enable_mesh_gateway_wan_federation=true + MeshGateway.Mode = "remote" + MeshGateway.Mode = "local" + System Components + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + LEADER + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + A + SERVICE + Service Instance + Sidecar Proxy (Envoy) + Mesh Gateway + Consul Client Agent + Consul Server Agents + not shown: the Consul client agentdeployed with each gatewayto manage its configuration + + + + Cross-DCCommunication Paths + Data Plane + + + Control Plane + see Consul agent config option:connect.enable_mesh_gateway_wan_federation + see "MeshGateway.Mode" config option in:(1) service proxy upstream, (2) service proxy,(3) service-defaults, (4) proxy-defaults + + + + + CONSUL SERVICE MESH + diff --git a/website/public/img/network-segments/consul-network-segments-multiple.png b/website/public/img/network-segments/consul-network-segments-multiple.png new file mode 100755 index 0000000000..16518dc4ec Binary files /dev/null and b/website/public/img/network-segments/consul-network-segments-multiple.png differ diff --git a/website/public/img/network-segments/consul-network-segments-multiple.svg b/website/public/img/network-segments/consul-network-segments-multiple.svg new file mode 100755 index 0000000000..78310172e1 --- /dev/null +++ b/website/public/img/network-segments/consul-network-segments-multiple.svg @@ -0,0 +1,783 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + <DEFAULT>SEGMENT + + ALPHASEGMENT + + BETASEGMENT + + SERVER AGENTS + DATACENTER 1 + CLIENT AGENTS + + + + + + + + + + + + + + + + + + 8301 + 8303 + 8304 + + + + + LEADER + 8301 + 8303 + 8304 + + + + + + + + + + + + + + + + + + + + + + + + + + + + 8301 + 8303 + 8304 + + + 8301 + + + 8301 + 8301 + 8301 + + + 8301 + + + 8301 + diff --git a/website/public/img/network-segments/consul-network-segments-single.png b/website/public/img/network-segments/consul-network-segments-single.png new file mode 100755 index 0000000000..0d36435fed Binary files /dev/null and b/website/public/img/network-segments/consul-network-segments-single.png differ diff --git a/website/public/img/network-segments/consul-network-segments-single.svg b/website/public/img/network-segments/consul-network-segments-single.svg new file mode 100755 index 0000000000..d11cb430f9 --- /dev/null +++ b/website/public/img/network-segments/consul-network-segments-single.svg @@ -0,0 +1,673 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + SERVER AGENTS + DATACENTER 1 + CLIENT AGENTS + + <DEFAULT>SEGMENT + + + + + + 8301 + + + 8301 + + + 8301 + + + 8301 + + + 8301 + + + 8301 + + 8301 + + + + + + + + + + + + + + + + + + 8301 + LEADER + + + + + + + + + + + + + + + 8301 + + + + + + + + + + + + + + +