Documentation Index
Fetch the complete documentation index at: https://mintlify.com/spatialillusions/milsymbol/llms.txt
Use this file to discover all available pages before exploring further.
milsymbol is distributed as a single JavaScript package with no runtime dependencies. It ships with CommonJS, ES module, and browser-global builds, plus a bundled TypeScript declaration file. You can install it from the npm registry or load it directly in an HTML page via a <script> tag.
Package Installation
milsymbol supports all common JavaScript module formats. Choose the one that matches your build environment.
ES Modules
CommonJS
Browser Script Tag
AMD / Dojo
Use the named default import in any ESM-capable environment — modern browsers, bundlers (Webpack, Rollup, Vite), or Node.js with "type": "module".import ms from "milsymbol";
const sym = new ms.Symbol("130310001412110000000000000000", { size: 35 });
console.log(sym.asSVG());
index.js, which re-exports the fully assembled ms namespace including all built-in standard icon sets (APP-6 B, 2525B, 2525C, APP-6 D, 2525D, 2525E). Use require in Node.js environments or any CommonJS bundler. The CommonJS build lives in dist/milsymbol.js.const ms = require("milsymbol");
const sym = new ms.Symbol("130310001412110000000000000000", { size: 35 });
console.log(sym.asSVG());
"main" field in package.json points to ./dist/milsymbol.js, so plain require("milsymbol") automatically resolves the correct build. Load the pre-built UMD bundle directly from your server or a CDN. It exposes a global ms namespace.<script src="dist/milsymbol.js"></script>
<script>
var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 });
document.body.innerHTML = symbol.asSVG();
</script>
dist/milsymbol.js with the full URL to the release asset from the GitHub releases page.The browser global build is also the file referenced by the "browser" field in package.json. Bundlers that target browser environments will automatically select this build when tree-shaking is not a concern.
The UMD bundle distributed in dist/milsymbol.js also supports AMD module loading. In a Dojo application you can load it alongside Dojo from an external source such as js.arcgis.com.<html>
<body>
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="app/milsymbol.js"></script>
<script>
require(["milsymbol"], function (ms) {
var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 });
document.body.innerHTML = symbol.asSVG();
});
</script>
</body>
</html>
dist/milsymbol.js into your app folder and reference it as require(["app/milsymbol"], ...). The dist/milsymbol.js file is a UMD bundle that registers itself as milsymbol for AMD loaders, exports a CommonJS module, and falls back to the ms global in plain browser environments. TypeScript Support
milsymbol ships with a bundled index.d.ts declaration file. No additional @types package is required. The "types" field in package.json points to ./index.d.ts, so TypeScript resolves types automatically.
import ms from "milsymbol";
import { type SymbolOptions } from "milsymbol";
const options: SymbolOptions = {
size: 35,
uniqueDesignation: "1PLT",
direction: 90,
fill: true,
colorMode: "Light",
};
const sym = new ms.Symbol("130310001412110000000000000000", options);
const svgString: string = sym.asSVG();
| Type | Description |
|---|
SymbolOptions | Interface for all constructor and setOptions arguments |
SymbolMetadata | Return type of sym.getMetadata() |
SymbolColors | Return type of sym.getColors() |
ColorMode | Color object with per-affiliation color strings |
DrawInstruction | Union type for all JSON draw instruction shapes |
ExtensionFunction | Function signature for ms.addSymbolPart extensions |
Extending TypeScript Types
If you are building an extension that introduces custom symbol options, you can augment the SymbolOptions interface using TypeScript module augmentation. Create a declaration file in your project:
// ./src/milsymbol.d.ts
import "milsymbol";
declare module "milsymbol" {
export interface SymbolOptions {
customOption?: number;
}
}
import ms from "milsymbol";
import { type DrawInstruction } from "milsymbol";
ms.addSymbolPart(function (ms) {
const options = this.getOptions();
const bbox = new ms.BBox();
const preDrawArray: DrawInstruction[] = [];
const postDrawArray: DrawInstruction[] = [];
const custom = options.customOption; // Type-safe: number | undefined
// your rendering logic...
return {
pre: preDrawArray,
post: postDrawArray,
bbox,
};
});
Node.js Usage
milsymbol works in Node.js without any additional setup for SVG output. The .asSVG() and .asDOM() methods have no browser DOM dependency. The .asCanvas() method requires a Canvas implementation — libraries such as node-canvas or canvas can be used to polyfill HTMLCanvasElement in a Node.js environment.
import ms from "milsymbol";
// SVG output works in Node.js with no extra setup
const svgString = new ms.Symbol("130310001412110000000000000000", {
size: 35,
uniqueDesignation: "1PLT",
}).asSVG();
console.log(svgString);
Entry point summary:
index.js — ES module entry point (used when bundlers or Node.js resolve the "import" condition). Import with import ms from "milsymbol".dist/milsymbol.js — Minified UMD bundle (used by require("milsymbol"), browser <script> tags, and AMD loaders). The dist/ folder contains a package.json with "type": "commonjs" to ensure correct resolution in Node.js.index.d.ts — TypeScript declarations, shared by both entry points.
