Add ability to use both solid and outlined font icons

[stonetip]

It would be helpful to be able to use either solid or outlined versions of icons in the same web page. I would be happy to submit a pull request if this is considered a valid issue. I very much appreciate the work that went into providing this excellent resource.

As defined currently, unless I'm mistaken, this isn't possible. I was able to achieve this by making just three modifications. In the modus-outlined/fonts directory, I modified the CSS file:

@font-face {
  font-family: "modus-icons-outlined";
...
}

.modus-icons-outlined {
  font-family: "modus-icons-outlined";
...
}

I could then reference the icons like this in the same web page:

<i class="modus-icons">map</i>
<i class="modus-icons-outlined">map</i>
...

[coliff]

Firstly - Sorry for the long delay in replying! The original intention for the Modus Icon sets were that a single set was to be used per app/site and they shouldn't be mixed & matched.

We realise there are instances were it makes sense to use some icons from both sets though.

We don't have official guidance on an implementation method for this at the moment, but the way you are handling it looks good - that's what I would have done. :-)

[jmecosta]

We also have the same need. Would be nice if this could be decided

[gabriel-piltzer-trimble]

Upvoting this. We also have the same need.

[stonetip]

Here's what we do to mix and match the sets (which I believe will remove the need for any action on your part - other than maybe adding some documentation somewhere):

1. After installing (in our case, using Yarn) we run a postinstall in package.json to copy modus-icons over to public:
   "scripts": {

"postinstall": "shx mkdir -p public/modus-icons && shx cp -r node_modules/@trimble-oss/modus-icons public/"

2. Each set of icons is referenced in an HTML page that requires them:

<link rel="stylesheet" href="/modus-icons/dist/modus-outlined/fonts/modus-icons.css" />
<link rel="stylesheet" href="/modus-icons/dist/transportation/fonts/modus-icons.css" />

3. We've found it easiest to use icons this way, but there are others (per general documentation). They can be used on the same page since the paths are specific:

    <svg class="icon button">
        <use href="/modus-icons/dist/transportation/sprites/modus-icons.svg#edit"/>
    </svg>
    <svg class="icon button">
        <use href="/modus-icons/dist/modus-outlined//sprites/modus-icons.svg#edit"/>
    </svg>

4. Programatically, we use code like this:

	const selectionContainer = document.createElement("div");
	const selectionToggle = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	const selectionUseElement = document.createElementNS("http://www.w3.org/2000/svg", "use");

	selectionContainer.classList.add("list-item-section");
	selectionToggle.classList.add("icon", "button", "plain");
	selectionUseElement.setAttributeNS(null, "href", "/modus-icons/dist/modus-outlined/sprites/modus-icons.svg#check-circle-outlined");

	selectionToggle.appendChild(selectionUseElement);
	selectionContainer.appendChild(selectionToggle);

[gabriel-piltzer-trimble]

How would you achieve this when referencing modus-icons from a CDN like jsDelivr?
@stonetip

[stonetip]

Judging by the URL there, it looks like you could get specific enough: https://cdn.jsdelivr.net/npm/@trimble-oss/[email protected]/dist/modus-solid/fonts/modus-icons.min.css Note where it says “modus-solid” you could substitute “modus-outlined”, for example.

…

________________________________ From: Gabriel Piltzer ***@***.***> Sent: Wednesday, November 13, 2024 10:44:45 AM To: trimble-oss/modus-icons ***@***.***> Cc: Jonathan Nehring ***@***.***>; Mention ***@***.***> Subject: Re: [trimble-oss/modus-icons] Add ability to use both solid and outlined font icons (Issue #363) How would you achieve this when referencing modus-icons from a CDN like ***@***.***/modus-icons>? @stonetip<https://github.com/stonetip> — Reply to this email directly, view it on GitHub<#363 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AA4XUDU4HGD4RP5UDIO2ZN32AOFY3AVCNFSM6AAAAABCXEHOC6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINZUGMZDAMZWGI>. You are receiving this because you were mentioned.Message ID: ***@***.***>