https://github.com/codeeditapp/codeeditsymbols
https://github.com/codeeditapp/codeeditsymbols
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codeeditapp/codeeditsymbols
- Owner: CodeEditApp
- Created: 2022-04-18T00:55:12.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-22T03:31:12.000Z (over 1 year ago)
- Last Synced: 2025-04-04T08:22:26.774Z (3 months ago)
- Language: Swift
- Size: 308 KB
- Stars: 21
- Watchers: 10
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CodeEditSymbols
A package containing all custom assets for CodeEdit. These are mostly custom [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/#creating-custom-symbols).
## How to use
### `NSImage`:
```swift
import CodeEditSymbols
let nsImage = NSImage.symbol(named: "name_of_the_symbol")
// or using the static property:
let nsImage1 = NSImage.name_of_the_symbol
```
### `Image`:
```swift
import CodeEditSymbols
let image = Image(symbol: "name_of_the_symbol")
// or using the static property:
let image1 = Image.name_of_the_symbol
```
## Creating a new Asset
To create a new asset, follow the guide on [Apple's developer website](https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app).
Add the `.svg` you exported from `SF Symbols.app` to the `Symbols.xcassets` catalog.
Also add a static property to the `Image` and `NSImage` extension like so:
```swift
// Image Extension
static let your_symbol_name: Image = .init(symbol: "your_symbol_name")
// NSImage Extension
static let your_symbol_name: NSImage = .symbol(named: "your_symbol_name")
```
> **Important:** Make sure your symbol looks great in every font weight.
## Tests
Also include snapshot tests for each symbol for `Image` as well as `NSImage`:
### `NSImage`:
```swift
// MARK: YOUR_SYMBOL_NAME
func testCreateNSImageYourSymbolName() {
let image = NSImage.your_symbol_name
let view = NSImageView(image: image)
view.appearance = .init(named: .aqua)
assertSnapshot(matching: view, as: .image, record: record)
}
```
### `Image`:
```swift
// MARK: YOUR_SYMBOL_NAME
func testCreateImageYourSymbolName() {
let image = Image.your_symbol_name
let view: NSView = NSHostingController(rootView: image).view
view.appearance = .init(named: .aqua)
assertSnapshot(matching: view, as: .image(size: view.intrinsicContentSize))
}
```
## Variants
Keep different variants of a symbol in the same parent folder and name them appropriately (see Apple's own symbols for reference).
You might have a symbol called `lock` and one where the symbol is inside a square where you would call that file `lock.square`. Also keep in mind to also provide a `.fill` variant if appropriate (`lock.fill`, `lock.square.fill`)
### Example of a `.fill` Variant
## Annotate the Symbol
As of version 3 of `SF Symbols` it is possible to create `multi-color`, `hierarchical` and `palette` annotations inside the `SF Symbols.app`. Be sure to annotate it accordingly if appropriate.
